标题:有时候我们定义了一个div盒子或者图片或其它标签,想让其一直旋转。
效果:
其实它会一直旋转的,就不放动图了,放张静图装装样子。
实现:
1.比如:定义一个div:
<div></div>
2.给盒子样式(定义了长、宽和背景图):
div{
width: 200px;
height: 200px;
background-image: url("disc.png");
background-size: 100% 100%;
}
3.css添加 animation-direction属性;
div{
width: 200px;
height: 200px;
background-image: url("disc.png");
background-size: 100% 100%;
animation: move 5s linear infinite;
}
@keyframes move{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
注意:上面的5s是定义了转一圈是5秒,可以该成其它秒数。