純html+css實現(xiàn)Element loading效果
發(fā)布時間：2021-07-29 17:04:43 作者：iwantmytea 
我要評論
我要評論本文主要介紹了純html+css實現(xiàn)Element loading效果，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
這是 Element UI loading 組件的效果圖，看起來很酷，我們來實現(xiàn)一下！
分析
動畫由兩部分組成：
藍(lán)色的弧線由點(diǎn)伸展成一個圓，又從圓收縮成一個點(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;
}
添加動畫效果
/* 旋轉(zhuǎn)動畫 */
@keyframes rotate {
to {
transform: rotate(1turn)
}
}
/* 弧線動畫 */
/* 125 是圓的周長 */
@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實現(xiàn)Element loading效果的文章就介紹到這了,更多相關(guān)html+css實現(xiàn) loading內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了CSS loading效果之 吃豆人的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)2019-09-09
今天實現(xiàn)了一個炫酷的loading效果，基本全用css來實現(xiàn)，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-04-26
這篇文章主要介紹了CSS3實現(xiàn)的幾個小loading效果 ,需要的朋友可以參考下2018-09-27- 這篇文章主要為大家詳細(xì)介紹了CSS3實現(xiàn)10種Loading效果，效果實現(xiàn)簡單新穎，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-11
- 這篇文章主要介紹了使用CSS時間打點(diǎn)的Loading效果的教程,分別是基于box-shadow和基于border+background的兩種實現(xiàn)方法,需要的朋友可以參考下2015-06-08
- 這篇文章主要為大家介紹了css實現(xiàn)葉子形狀loading效果的方法,通過修改border-radius的參數(shù)實現(xiàn)的該效果,非常具有實用價值,需要的朋友可以參考下2015-01-30
