溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細(xì)講解有關(guān)CSS如何實(shí)現(xiàn)動(dòng)態(tài)漸變色邊框圍繞內(nèi)容區(qū)域旋轉(zhuǎn)的效果，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
效果圖
  在網(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)的漸變色背景，但是超出中間盒子大小的部分被隱藏掉了。
關(guān)于“CSS如何實(shí)現(xiàn)動(dòng)態(tài)漸變色邊框圍繞內(nèi)容區(qū)域旋轉(zhuǎn)的效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼