轉(zhuǎn)載請(qǐng)注明出處题诵，點(diǎn)擊此處 查看更多精彩內(nèi)容
預(yù)覽效果
用 CSS 實(shí)現(xiàn)漸變邊框及動(dòng)畫，下面對(duì)關(guān)鍵點(diǎn)解釋說明徒溪，查看完整代碼及預(yù)覽效果請(qǐng) 點(diǎn)擊這里你稚。
簡(jiǎn)單說明原理：使用偽元素 ::before 繪制一個(gè)漸變色瞬沦，然后使用偽元素 ::after 繪制背景，使其遮住漸變色的一部分剿另，僅保留邊框部分箫锤，然后添加旋轉(zhuǎn)動(dòng)畫即可。
DOM 結(jié)構(gòu)
<div class="container"></div>
.container {
border-radius: var(--border-radius);
overflow: hidden;
}
overflow: hidden 防止內(nèi)部元素溢出雨女。
漸變背景
使用 ::before 偽元素實(shí)現(xiàn)一個(gè)徑向漸變背景谚攒。
.container::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 150%;
padding-bottom: 150%;
background: conic-gradient(from 180deg at 50% 50%,#e92a67 0deg,#a853ba 112.5deg,#2a8af6 228.75deg,rgba(42,138,246,0) 360deg);
z-index: -1;
}
這里沒有直接設(shè)置偽元素高度，而是使用 width: 200%; padding-bottom: 200%; 繪制一個(gè)正方形氛堕，并且尺寸大于父元素馏臭，防止動(dòng)畫時(shí)背景不能完全覆蓋父元素。
漸變邊框
使用 ::after 偽元素作為遮罩及背景，遮住 ::before 偽元素使其僅展示出邊框區(qū)域括儒。
.container::after {
content: "";
position: absolute;
inset: var(--border-size);
background: var(--bg-color);
border-radius: var(--border-radius);
z-index: -1;
}
添加動(dòng)畫
給 :before 添加旋轉(zhuǎn)動(dòng)畫绕沈。
@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
.container::before {
...,
animation: rotate 3s linear infinite;
}
邊框追逐效果
通過設(shè)置分區(qū)的漸變背景即可完成邊框上多線條相互追逐的炫酷效果。
.container {
--border-color: conic-gradient(from 180deg at 50% 50%,#e92a67 0deg, transparent 90deg, transparent 180deg, #2a8af6 180deg, transparent 270deg);
}
