1、电池加载动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
margin: 0 auto;
width: 300px;
height:300px;
position: relative;
display:flex;
justify-content:center;
align-items:center;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.shape
{
width:80px;
height: 40px;
border: 8px #b22222 solid;
border-radius: 10%;
position: relative;
animation: anim 5s linear infinite;
}
.shape:after
{
width: 5.6px;
height: 100%;
background-color: #b22222;
border-radius: 0px 40px 40px 0px;
position: absolute;
content: "";
top: 0;
left: calc(100% + 8px);
}
@keyframes anim
{
0% { box-shadow: inset 0px 0px 0px #b22222; }
100% { box-shadow: inset 80px 0px 0px #b22222; }
}
</style>
</head>
<body>
<div class="container">
<div class="shape"></div></div>
</body>
</html>2、线条波动动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
margin: 0 auto;
width: 300px;
height:300px;
position: relative;
display:flex;
justify-content:center;
align-items:center;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.shape {
width: 10px;
height: 100px;
margin: 5px;
display: inline-block;
border-radius: 4px;
background-color: #00ff00;
animation: loading 1s infinite ease;
}
.shape:nth-child(1n+0)
{
animation-delay:var(--delay);
}
@keyframes loading
{
0%,40%,100% { transform: scaleY(0.5); }
20% { transform: scaleY(1); }
}
</style>
</head>
<body>
<div class="container">
<div class="shape" style="--delay:0s;"></div>
<div class="shape" style="--delay:0.2s;"></div>
<div class="shape" style="--delay:0.4s;"></div>
<div class="shape" style="--delay:0.6s;"></div>
<div class="shape" style="--delay:0.8s;"></div>
</div>
</body>
</html>3、旋转：CSS动画：旋转动画 | 码农家园