實例：跳躍的彈性小球加載動畫
技術(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>跳躍的彈性小球加載動畫</title>
<link rel="stylesheet" href="../css/71.css">
</head>
<body>
<div class="loader">
<span class="ball" style="--i:1;"></span>
<span class="shadow" style="--i:1;"></span>
<span class="ball" style="--i:2;"></span>
<span class="shadow" style="--i:2;"></span>
<span class="ball" style="--i:3;"></span>
<span class="shadow" style="--i:3;"></span>
<span class="ball" style="--i:4;"></span>
<span class="shadow" style="--i:4;"></span>
<span class="ball" style="--i:5;"></span>
<span class="shadow" style="--i:5;"></span>
</div>
</body>
</html>
【css】
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
/* 彈性布局 水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
}
.loader{
width: 650px;
height: 200px;
/* 相對定位 */
position: relative;
}
/* 小球 */
.loader span.ball{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: lightseagreen;
/* 絕對定位 */
position: absolute;
/* 通過var函數(shù)調(diào)用自定義屬性--i，計算出每個小球的位置 */
left: calc(var(--i) * 100px);
/* 執(zhí)行動畫：動畫名 時長 線性的 無限次播放 利用變量讓小球的運(yùn)動拉開時間 */
animation: jump 2s linear infinite calc(var(--i) * 0.3s);
}
/* 小球陰影 */
.loader span.shadow{
width: 50px;
height: 25px;
border-radius: 50%;
position: absolute;
left: calc(var(--i) * 100px);
bottom: -12.5px;
z-index: -1;
background-color: #000;
animation: shadow 2s linear infinite calc(var(--i) * 0.3s);
}
/* 定義動畫 */
/* 跳動的動畫 */
@keyframes jump {
0%,100%{
bottom: 150px;
}
40%,60%{
bottom: 0;
height: 50px;
}
50%{
height: 25px;
/* 顏色濾鏡，可以設(shè)置不同的度數(shù)來改變顏色 */
filter: hue-rotate(180deg);
}
}
/* 陰影的變化 */
@keyframes shadow {
0%,100%{
transform: scale(2);
opacity: 0.1;
/* 模糊濾鏡 */
filter: blur(5px);
}
40%,60%{
transform: scale(1);
opacity: 1;
filter: blur(2px);
}
}
