课堂动画练习
2018-09-13 本文已影响0人
幸而0407
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type = 'text/css'>
.total{width:800px;height:400px;
border:1px solid #000;
margin:50px auto 0;
position:relative;
overflow:hidden;
text-align: center;}
.box1{width:40px;height: 200px;
background-color: red;border-radius: 60px;
margin-left: 30px;padding:30px;display:inline-block;
animation: move 1s ease 0s infinite alternate both;}
.box2{width:40px;height: 200px;
background-color: green;border-radius: 60px;
margin-left: 30px;padding:30px;display:inline-block;
animation: move 1s ease 100ms infinite alternate both;}
.box3{width:40px;height: 200px;
background-color: pink;border-radius: 60px;
margin-left: 30px;padding:30px;display:inline-block;
animation: move 1s ease 200ms infinite alternate both;}
.box4{width:40px;height: 200px;
background-color: yellowgreen;border-radius: 60px;
margin-left: 30px;padding:30px;display:inline-block;
animation: move 1s ease 300ms infinite alternate both;}
.box5{width:40px;height: 200px;
background-color: blue;border-radius: 60px;
margin-left: 30px;padding:30px;display:inline-block;
animation: move 1s ease 400ms infinite alternate both;}
@keyframes move{from{transform:scaleY(1);}
to{transform:scaleY(0.5);}}
.total p{font-size:30px;text-align: center;
}
</style>
</head>
<body>
<div class="total">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<p>loading...</p>
</div>
</body>
</html>
-
效果图
Image 1.png
Image 2.png
