前言
Hello呻右！小伙伴跪妥！
首先非常感謝您閱讀海轟的文章，倘若文中有錯誤的地方声滥，歡迎您指出～
哈哈 自我介紹一下
昵稱：海轟
標簽：程序猿一只｜C++選手｜學生
簡介：因C語言結識編程眉撵，隨后轉(zhuǎn)入計算機專業(yè)，有幸拿過國獎、省獎等纽疟，已保研罐韩。目前正在學習C++/Linux（真的真的太難了～）
學習經(jīng)驗：扎實基礎 + 多做筆記 + 多敲代碼 + 多思考 + 學好英語！
效果展示
在這里插入圖片描述
Demo代碼
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section><span></span></section>
</body>
</html>
CSS
html,body{
margin: 0;
height: 100%;
}
body{
display: flex;
justify-content: center;
align-items: center;
background: #263238;
}
section {
width: 650px;
height: 300px;
padding: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid red;
}
span {
width : 96px;
height: 96px;
border-radius: 50%;
display: inline-block;
position: relative;
border: 20px solid;
animation: animloader 2s linear infinite alternate;
}
@keyframes animloader {
0% { border-color: rgba(255,255,255, 1) rgba(255,255,255, 0) rgba(255,255,255, 0) rgba(255,255,255, 0);}
33% { border-color: rgba(255,255,255, 1) rgba(255,255,255, 1) rgba(255,255,255, 0) rgba(255,255,255, 0);}
66% { border-color: rgba(255,255,255, 1) rgba(255,255,255, 1) rgba(255,255,255, 1) rgba(255,255,255, 0);}
100% { border-color: rgba(255,255,255, 1) rgba(255,255,255, 1) rgba(255,255,255, 1) rgba(255,255,255, 1);}
}
原理詳解
步驟1
使用span標簽污朽，設置
- 寬度散吵、高度均為96px
- 邊框：20px solid
效果圖如下
在這里插入圖片描述
步驟2
span圓角化
border-radius: 50%;
效果圖如下
在這里插入圖片描述
步驟3
為span添加動畫
動畫總共分為4幀
第一幀
- 上邊框顏色設置為：白色 其余為透明
在這里插入圖片描述
為了便于觀察
這里給出未對span圓角化之前的視角
這樣就會更好得理解每一幀的原理
在這里插入圖片描述
第二幀
-
上+右 邊框顏色設置為：白色 其余透明
在這里插入圖片描述
未設置border-radius: 50%前的效果如下
在這里插入圖片描述
第三幀
-
上+右+下 邊框顏色設置為白色 其余為透明
在這里插入圖片描述
未設置border-radius: 50%前的效果如下
在這里插入圖片描述
第四幀
-
上+下+左+右 邊框均為白色
在這里插入圖片描述
未設置border-radius: 50%前的效果如下
在這里插入圖片描述
綜上
變化過程就是：
在這里插入圖片描述
代碼如下
animation: animloader 2s linear infinite ;
/*動畫實現(xiàn)*/
@keyframes animloader {
/*第一幀*/
0% { border-color: rgba(255,255,255, 1) rgba(255,255,255, 0) rgba(255,255,255, 0) rgba(255,255,255, 0);}
/*第二幀*/
33% { border-color: rgba(255,255,255, 1) rgba(255,255,255, 1) rgba(255,255,255, 0) rgba(255,255,255, 0);}
/*第三幀*/
66% { border-color: rgba(255,255,255, 1) rgba(255,255,255, 1) rgba(255,255,255, 1) rgba(255,255,255, 0);}
/*第四幀*/
100% { border-color: rgba(255,255,255, 1) rgba(255,255,255, 1) rgba(255,255,255, 1) rgba(255,255,255, 1);}
}
注：這里使用了rgba函數(shù)，設置透明級別為0來實現(xiàn)的透明色
效果圖如下
在這里插入圖片描述
步驟4
從上面的效果中我們可以看出
我們需要的效果是：執(zhí)行完4幀后膘壶，再反向回到動畫初始位置
其實也很簡單
再多設置一個參數(shù)即可
設置動畫為：輪流反向播放動畫
animation: animloader 2s linear infinite alternate;
效果如下
在這里插入圖片描述
注：
在這里插入圖片描述
結語
學習來源：
文章僅作為學習筆記错蝴，記錄從0到1的一個過程。希望對您有所幫助颓芭，如有錯誤歡迎小伙伴指正～
我是海轟?(?ˊ?ˋ)?顷锰，如果您覺得寫得可以的話，請點個贊吧
寫作不易亡问，「點贊」+「收藏」+「轉(zhuǎn)發(fā)」
謝謝支持??
在這里插入圖片描述
