1.如下一个html结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<!-- 可按照中心匀速旋转的盒子 -->
<div class="rotate"></div>
</body>
</html>
2.给盒子添加样式
- rotate : 定义的动画名称。
- 1s : 动画时间。
- linear : 动画以何种运行轨迹完成一个周期。
- infinite : 规定动画应该无限次播放。
.rotate {
width: 100px;
height: 100px;
background: aqua;
animation: turn 4s linear infinite;
margin: 100px auto;
}
3.给盒子添加CSS3动画
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
简单的动画效果就完成啦，直接复制代码即可看到效果。
