anmition动画
程序员文章站
2022-04-27 12:21:45
...
anmition制作类loading加载动画
了解anmition
考虑到兼容性问题，用
@-webkit-keyframes name{
from{}
to{}
}
动画内可以使用多种属性，transform下的各种属性
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
width:120px;
height:800px;
border: 1px solid black;
display: flex;
margin: 30px auto;
}
.box2{
width: 10px;
height: 10px;
background-color: red;margin: auto;
animation: xuanzhuan 2.8s linear infinite;
}
.box2:nth-of-type(1){
animation-delay: .2s;
}
.box2:nth-of-type(2){
animation-delay: .4s;
}
.box2:nth-of-type(3){
animation-delay: .6s;
}
.box2:nth-of-type(4){
animation-delay: .8s;
}
.box2:nth-of-type(5){
animation-delay: 1s;
}
.box2:nth-of-type(6){
animation-delay: 1.2s;
}
.box2:nth-of-type(7){
animation-delay: 1.4s;
}
.box2:nth-of-type(8){
animation-delay: 1.6s;
}
.box2:nth-of-type(9){
animation-delay: 1.8s;
}
@-webkit-keyframes xuanzhuan{
0%{height: 10px;}
20%{height: 200px;}
40%{height: 300px;}
60%{height: 400px;}
100%{height: 10px;}
}
@-webkit-keyframes name{
from{}
to{}
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
<div class="box2">
</div>
<div class="box2">
</div>
<div class="box2">
</div>
<div class="box2">
</div>
<div class="box2">
</div>
</div>
</body>
</html>
效果并不完善，可以自行设置
下一篇： css如何去掉上边框