<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>旋转11图</title>
</head>
<style>
.bigbox{
width: 500px;
height: 200px;
margin: 0 auto;
background: yellowgreen;
position: relative;
}
.smallbox{
width:100px;
height:40px;
line-height: 40px;
text-align: center;
border-radius:8px ;
position: absolute;
top: 60px;
animation: zhuan 6s infinite;
}
@keyframes zhuan{
0%{background: cadetblue; transform: rotate(0deg); left: 0px;}
10%{background: lightblue; transform: rotate(45deg); }
11%{background: lightblue; transform: rotate(10deg); }
80%{background: lightblue; transform: rotate(0deg); left: 80%;}
100%{background: skyblue; transform: rotate(-1080deg); left: 0px;}
}
</style>
<body>
<div class="bigbox">
<div class="smallbox">
CSS动画
</div>
</div>
</body>
</html>