纯css图片自动旋转动画

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

  • 1
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值