實例：廣告燈牌效果的loading動畫
技術(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>廣告燈牌效果的loading動畫</title>
<link rel="stylesheet" href="../css/88.css">
</head>
<body>
<div class="loader">
<div class="dot-box">
<div class="dot" style="--i:0;"></div>
<div class="dot" style="--i:1;"></div>
<div class="dot" style="--i:2;"></div>
<div class="dot" style="--i:3;"></div>
<div class="dot" style="--i:4;"></div>
<div class="dot" style="--i:5;"></div>
<div class="dot" style="--i:6;"></div>
<div class="dot" style="--i:7;"></div>
<div class="dot" style="--i:8;"></div>
<div class="dot" style="--i:9;"></div>
</div>
<p>拼命加載中...</p>
<div class="dot-box">
<div class="dot" style="--i:0;"></div>
<div class="dot" style="--i:1;"></div>
<div class="dot" style="--i:2;"></div>
<div class="dot" style="--i:3;"></div>
<div class="dot" style="--i:4;"></div>
<div class="dot" style="--i:5;"></div>
<div class="dot" style="--i:6;"></div>
<div class="dot" style="--i:7;"></div>
<div class="dot" style="--i:8;"></div>
<div class="dot" style="--i:9;"></div>
</div>
</div>
</body>
</html>
【css】
*{
/* 初始化 */
margin: 0;
padding: 0;
/* box-sizing: border-box; */
}
body{
/* 100%窗口高度 */
min-height: 100vh;
/* 彈性布局 水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
/* 自定義屬性，可通過var函數(shù)對其調(diào)用 */
--c:gold;
}
.loader{
/* 彈性布局 垂直排列 居中 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* 執(zhí)行動畫：動畫名 時長 線性 無限次播放 */
animation: changeColor 5s linear infinite;
}
.dot-box{
display: flex;
}
.dot-box .dot{
width: 20px;
height: 20px;
border-radius: 50%;
/* 通過var函數(shù)調(diào)用自定義屬性--c，設(shè)置顏色 */
background-color: var(--c);
/* 陰影（發(fā)光效果） */
box-shadow: 0 0 10px var(--c),
0 0 20px var(--c),
0 0 40px var(--c),
0 0 60px var(--c),
0 0 80px var(--c),
0 0 100px var(--c);
margin: 20px 10px;
/* 默認(rèn)縮放為0.1倍 */
transform: scale(0.1);
/* 執(zhí)行動畫 */
animation: dotAnimate 2s linear infinite;
/* 設(shè)置每一個點的動畫延遲時間 */
animation-delay: calc(0.1s * var(--i));
}
.loader p{
color: var(--c);
font-size: 20px;
font-weight: 500;
letter-spacing: 5px;
}
.dot-box:nth-child(3) .dot{
/* 設(shè)置下面一排圓點的動畫延遲時間 */
animation-delay: calc(-0.1s * var(--i));
}
/* 定義動畫 */
/* 圓點的動畫 */
@keyframes dotAnimate {
0%{
/* 設(shè)置縮放 */
transform: scale(0.1);
}
10%{
transform: scale(1);
}
50%,100%{
transform: scale(0.1);
}
}
/* 顏色改變動畫 */
@keyframes changeColor {
0%{
/* 顏色濾鏡 */
filter: hue-rotate(0deg);
}
100%{
filter: hue-rotate(360deg);
}
}
