制作工具: HBuilder需要技术:HTML + CSS
<!DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box1"><--使用div布局-->
<div class="box2"></div>
</div>
</body>
</html>
CSS样式
.box1{margin: 0px auto; /*居中效果*/
width: 40px;
height: 300px;/*设置宽高*/
padding: 20px;
-moz-perspective: 200;
-ms-perspective: 200;
-webkit-perspective: 100;}
.box2{background-color: red;
width: 40px;
height: 280px; /*设置宽高*/
animation:box2 1s infinite;}/*调用动画*/
@keyframes box2{/*设置动画*/
0%{transform: rotateX(0deg)}
20%{transform: rotateX(-35deg)}
40%{transform: rotateX(-70deg)}
60%{transform: rotateX(-105deg)}
80%{transform: rotateX(-140deg)}
100%{transform: rotateX(-175deg)}
}