纯css图片自动旋转动画

猿学

已于 2023-06-15 17:37:36 修改

阅读量7.1k

点赞数 1

分类专栏： HTML JS 文章标签： css 动画前端

于 2022-08-30 17:18:10 首次发布

资料多来源于网络，如有侵权，请联系本人予以删除

本文链接：https://blog.csdn.net/weixin_38787928/article/details/126607937

版权

JS 同时被 2 个专栏收录

29 篇文章 1 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

HTML

8 篇文章 0 订阅

订阅专栏

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实现图片自动旋转动画全文。