标签：三点 opacity dotting display 循环 margin animation 加载
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>加载动画</title></head>
<style>
.dotting {
margin: 20% auto;
width: 150px;
}
.dotting {
margin-top: 10px;
display: flex;
align-items: center;
}
.dotting > div {
display: inline-block;
width: 12px;
height: 12px;
background-color: #bec7d1;
border-radius: 50%;
display: inline-block;
animation: dotting 1.5s infinite ease-in-out;
animation-fill-mode: both;
margin-left: 3px;
}
.dotting .point1 {
animation-delay: -0.3s;
margin-left: 5px;
}
.dotting .point2 {
animation-delay: -0.1s;
}
@keyframes dotting {
0% {
opacity: 1;
}
33% {
opacity: 0.25;
}
66% {
opacity: 0.25;
}
100% {
opacity: 1;
}
}
</style>
<body>
<div class="dotting">
<div class="point1"></div>
<div class="point2"></div>
<div class="point3"></div>
</div>
</body>
</html>
标签：三点,
opacity,
dotting,
display,
循环,
margin,
animation,
加载
From： https://www.cnblogs.com/DL-CODER/p/17305669.html