CSS動態(tài)漸變色邊框圍繞內容區(qū)域旋轉的效果(實例代碼)
發(fā)布時間：2019-11-18 10:36:57 作者：佚名 
我要評論
我要評論這篇文章主要介紹了CSS動態(tài)漸變色邊框圍繞內容區(qū)域旋轉的效果,代碼簡單易懂非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
效果圖
在網(wǎng)上查閱相關資料后，發(fā)現(xiàn)目前的動態(tài)漸變色邊框的實現(xiàn)方式大部分為使用偽元素比內容區(qū)域大一圈然后橫向移動漸變色背景的方式實現(xiàn)，而沒有漸變色邊框圍繞內容區(qū)域進行旋轉的效果，于是我做了一個這樣的demo供大家參考。
實現(xiàn)原理
首先將內容區(qū)域嵌套進一個DIV盒子中并設置overflow：hidden;。這個盒子的大小是內容區(qū)域的大小加上你希望實現(xiàn)的漸變邊框的寬度，然后將內容區(qū)域居中，這樣內容區(qū)域和父元素之間就有一個看似是邊框的空白區(qū)域。
現(xiàn)在在這個空白區(qū)域加一個比父元素更大，背景為漸變色的盒子，將層級設置為最低z-index: -1;。再將這個漸變色背景的盒子加入旋轉動畫就完成了。
看起來頗為繁瑣，實際結構卻非常簡單，只要腦海中能夠有大概的立體感就能立刻明白這其中的原理。
HTML結構
<body>
<!-- 最外層僅起到限制漸變區(qū)域大小的作用 -->
<div class="wrap">
<!-- 漸變顯示區(qū)域 -->
<div class="bgc"></div>
<!-- 內容 -->
<div class="content"></div>
</div>
</body>
CSS
<style>
/* 彈性盒子使demo居中 */
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* 最外層的作用是讓中間的.bgc溢出部分隱藏
大小根據(jù)內容區(qū)域與邊框大小自由調整 */
.wrap {
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
border-radius: 20px;
/* 彈性盒子使content區(qū)域居中顯示 */
display: flex;
align-items: center;
justify-content: center;
}
/* 最終動態(tài)漸變邊框實際內容 比.wrap大 但是因為溢出部分被隱藏
而中間部分又因為層級關系被.content蓋住
最后只有.wrap和.content之間的縫隙顯示這個旋轉的漸變色背景 */
.bgc {
width: 500px;
height: 500px;
background: linear-gradient(#fff,#448de0);
animation: bgc 1.5s infinite linear;
border-radius: 50%;
position: absolute;
z-index: -1;
}
/* 內容區(qū)域 根據(jù)自身情況調整大小 */
.content {
width: 250px;
height: 250px;
background-color: #fff;
border-radius: 20px;
}
/* 漸變色背景旋轉動畫 */
@keyframes bgc {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
}
</style>
為了讓大家能更清晰地明白層級關系，我做了個一個3D效果的關系圖，箭頭越靠近指向的方向層級越高。最小實心方塊是內容區(qū)域，最大的藍色圓形是進行旋轉的漸變色背景，但是超出中間盒子大小的部分被隱藏掉了。
總結
以上所述是小編給大家介紹的CSS動態(tài)漸變色邊框圍繞內容區(qū)域旋轉的效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
- 這篇文章主要介紹了使用純 CSS 創(chuàng)作一個漸變色動畫邊框,需要的朋友可以參考下2018-11-20