今天在重构网页特效的时候,想着用到一个css3的旋转特效。简单来一个demo。
html
<div class="box">
<img src="./yft.png" alt="" class="rotation">
</div>
css
<style>
@-webkit-keyframes rot {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.rotation {
animation: rot 3s linear infinite;
}
</style>
注意的是,建议这里使用的是插入图片,如果用背景图片的话,那么盒子内的内容也会进行旋转。