实现一个简易loading动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>loading动画实现</title>
</head>
<style type="text/css">
body {
/*居中*/
text-align: center;
}
.container {
/*块级元素在同一行*/
display: inline-block;
}
.point {
width: 10px;
height: 10px;
background: #000000;
/*设置半径*/
border-radius: 50%;
/*让标签产生浮动的效果,块元素都是从上到下排列的,left属性,实现左右浮动 */
float: left;
/*每个元素的距离左部位置5px*/
margin-left: 5px;
/*一次动画持续1.2秒,先加速后减速,不停执行*/
animation: myAnima 1.2s ease-in-out infinite;
}
.two {
animation-delay: 200ms;
}
.three {
animation-delay: 400ms;
}
@keyframes myAnima {
from {
/*设置透明度 */
opacity: 0.8
}
to {
opacity: 0
}
}
</style>
<body>
<div class="container">
<div class="point one"></div>
<div class="point two"></div>
<div class="point three"></div>
</div>
</body>
</html>