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