實例：酷炫的環(huán)形加載動畫
技術(shù)棧：HTML+CSS
效果：
源碼：
【html】
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>酷炫的環(huán)形加載動畫</title>
<link rel="stylesheet" href="../css/55.css">
</head>
<body>
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</body>
</html>
【css】
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
/* 彈性布局 居中 */
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.container{
/* 相對定位 */
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container .circle{
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
border: 5px solid transparent;
margin: -30px;
/* 通過var函數(shù)調(diào)用自定義屬性--c（顏色值） */
border-top: 5px solid var(--c);
/* 通過var函數(shù)調(diào)用自定義屬性--a（動畫名） */
/* 執(zhí)行動畫：動畫名 時長 線性的 無限次播放 */
animation: var(--a) 3s linear infinite;
}
/* 發(fā)光頭 */
.container .circle::before{
content: "";
/* 絕對定位 */
position: absolute;
top: 12px;
right: 12px;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: var(--c);
/* 陰影（發(fā)光效果） */
box-shadow:
0 0 5px var(--c),
0 0 10px var(--c),
0 0 20px var(--c),
0 0 40px var(--c),
0 0 80px var(--c);
}
/* 第三個圓 */
.container .circle:nth-child(3){
position: absolute;
top: -66.66px;
/* 設(shè)置自定義屬性--c（顏色）、--a（動畫） */
--c: lightgreen;
--a: animate2;
/* 動畫延遲時間 */
animation-delay: -2s;
/* 調(diào)整邊框 */
border-top: 5px solid transparent;
border-left: 5px solid var(--c);
}
/* 第二個圓 */
.container .circle:nth-child(2){
--c: lightsalmon;
--a: animate2;
animation-delay: -0.5s;
border-top: 5px solid transparent;
border-left: 5px solid var(--c);
}
/* 第一個圓 */
.container .circle:nth-child(1){
/* 設(shè)置自定義屬性--c（顏色）、--a（動畫） */
--c: lightskyblue;
--a: animate1;
}
.container .circle:nth-child(3):before,
.container .circle:nth-child(2):before{
/* initial關(guān)鍵字用于設(shè)置CSS屬性為它的默認(rèn)值 */
top: initial;
left: 12px;
bottom: 12px;
}
/* 定義動畫 */
@keyframes animate1 {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes animate2 {
0%{
transform: rotate(360deg);
}
100%{
transform: rotate(0deg);
}
}
