css能否实现图片自动旋转动画呢?答案当然是肯定的,
首先看下效果:
HTML代码
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yipic.cn%2Fthumb%2Fda6639c9%2F814ac8bc%2Ff0e92a5b%2Fedda1715%2Fbig_da6639c9814ac8bcf0e92a5bedda1715.jpg%3Fx-oss-process%3Dimage%2Fformat%2Cwebp%2Fsharpen%2C100&refer=http%3A%2F%2Fimg.yipic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664442170&t=871f1b567489af230c54360543ab1626" class='img'>
<style>
.img{
display: block;
width: 300px;
margin: 200px auto;
-webkit-animation: rotation 15s linear infinite;
animation: rotation 15s linear infinite;
}
@keyframes rotation {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
</style>
以上就是纯css实现图片自动旋转动画全文。