純html+css實(shí)現(xiàn)Element loading效果
發(fā)布時(shí)間：2021-07-29 17:04:43 作者：iwantmytea 
我要評(píng)論
我要評(píng)論本文主要介紹了純html+css實(shí)現(xiàn)Element loading效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
這是 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)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS loading效果之 吃豆人的實(shí)現(xiàn)
這篇文章主要介紹了CSS loading效果之 吃豆人的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2019-09-09
css3 中實(shí)現(xiàn)炫酷的loading效果
今天實(shí)現(xiàn)了一個(gè)炫酷的loading效果，基本全用css來(lái)實(shí)現(xiàn)，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-04-26
基于CSS3實(shí)現(xiàn)的幾個(gè)小loading效果
這篇文章主要介紹了CSS3實(shí)現(xiàn)的幾個(gè)小loading效果 ,需要的朋友可以參考下2018-09-27- 這篇文章主要為大家詳細(xì)介紹了CSS3實(shí)現(xiàn)10種Loading效果，效果實(shí)現(xiàn)簡(jiǎn)單新穎，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-11
使用CSS時(shí)間打點(diǎn)的Loading效果的教程
這篇文章主要介紹了使用CSS時(shí)間打點(diǎn)的Loading效果的教程,分別是基于box-shadow和基于border+background的兩種實(shí)現(xiàn)方法,需要的朋友可以參考下2015-06-08- 這篇文章主要為大家介紹了css實(shí)現(xiàn)葉子形狀loading效果的方法,通過(guò)修改border-radius的參數(shù)實(shí)現(xiàn)的該效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-30
