這是 Element UI loading 組件的效果圖，看起來(lái)很酷，我們來(lái)實(shí)現(xiàn)一下！
分析
動(dòng)畫(huà)由兩部分組成：
藍(lán)色的弧線由點(diǎn)伸展成一個(gè)圓，又從圓收縮成一個(gè)點(diǎn)。
圓的父節(jié)點(diǎn)帶著圓旋轉(zhuǎn)
代碼
html
<svg viewBox="25 25 50 50" class="box">
<circle cx="50" cy="50" r="20" fill="none" class="circle"></circle>
</svg>
css
默認(rèn)樣式
.box {
height: 200px;
width: 200px;
background: wheat;
}
.box .circle {
stroke-width: 2;
stroke: #409eff;
stroke-linecap: round;
}
添加動(dòng)畫(huà)效果
/* 旋轉(zhuǎn)動(dòng)畫(huà) */
@keyframes rotate {
to {
transform: rotate(1turn)
}
}
/* 弧線動(dòng)畫(huà) */
/* 125 是圓的周長(zhǎng) */
@keyframes circle {
0% {
/* 狀態(tài)1: 點(diǎn) */
stroke-dasharray: 1 125;
stroke-dashoffset: 0;
}
50% {
/* 狀態(tài)2: 圓 */
stroke-dasharray: 120, 125;
stroke-dashoffset: 0;
}
to {
/* 狀態(tài)3: 點(diǎn)（向旋轉(zhuǎn)的方向收縮） */
stroke-dasharray: 120 125;
stroke-dashoffset: -125px;
}
}
.box {
/* ...同上 */
animation: rotate 2s linear infinite;
}
.circle {
/* ...同上 */
animation: circle 2s infinite;
}
最后把背景去掉
在線代碼演示 https://jsbin.com/yarufoy/edit?html,css,output
到此這篇關(guān)于純html+css實(shí)現(xiàn)Element loading效果的文章就介紹到這了,更多相關(guān)html+css實(shí)現(xiàn) loading內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
