实例：跳跃的弹性小球加载动画
技术栈：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函数调用自定义属性--i，计算出每个小球的位置 */
left: calc(var(--i) * 100px);
/* 执行动画：动画名 时长 线性的 无限次播放 利用变量让小球的运动拉开时间 */
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;
/* 颜色滤镜，可以设置不同的度数来改变颜色 */
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);
}
}
