代刷网头像自动旋转代码

王宏利 2020/02/04 02:17:08

下图为演示图,默认为打开代刷网后顶部头像,和查单页面的,其实还有帮助与反馈这三个地方,头像都会自动360旋转!

由于图片是静态的没办法动起来演示,奈何我不会做gif动图,自己凭脑子想象把。


 代码:

<style>
.img-avatar{
    -webkit-animation:rotateImg 3s linear infinite;  
}
@keyframes rotateImg {
  0% {transform : rotate(0deg);}
  100% {transform : rotate(360deg);}
}
@-webkit-keyframes rotateImg {
    0%{-webkit-transform : rotate(0deg);}
  100%{-webkit-transform : rotate(360deg);}

</style>

如果上面代码效果不显示,把第二行的img-avatar改为img-circle!

优站网https://www.youzhan9.com/