首页  >  文章  >  web前端  >  css怎么设置图片不停旋转

css怎么设置图片不停旋转

王林
王林原创
2020-11-24 13:48:037882浏览

css设置图片不停旋转的方法:可以通过使用animation属性和transform属性来进行设置,如【-webkit-transform: rotate(360deg);animation: rotation;】。

css怎么设置图片不停旋转

本教程操作环境:windows10系统、css3版,该方法适用于所有品牌电脑。

(学习视频分享:css视频教程

css设置图片不停旋转的方法:

相关属性:

animation动画属性

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

属性值:

  • animation-name    指定要绑定到选择器的关键帧的名称    

  • animation-duration    动画指定需要多少秒或毫秒完成    

  • animation-timing-function    设置动画将如何完成一个周期    

  • animation-delay    设置动画在启动前的延迟间隔。    

  • animation-iteration-count    定义动画的播放次数。    

  • animation-direction    指定是否应该轮流反向播放动画。    

  • animation-fill-mode    规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。 

  • animation-play-state    指定动画是否正在运行或已暂停。    

  • initial    设置属性为其默认值。

  • inherit    从父元素继承属性。    

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。

transform: none|transform-functions;

属性值:

  • none    定义不进行转换。    

  • matrix(n,n,n,n,n,n)    定义 2D 转换,使用六个值的矩阵。    

  • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)    定义 3D 转换,使用 16 个值的 4x4 矩阵。    

  • translate(x,y)    定义 2D 转换。    

  • translate3d(x,y,z)    定义 3D 转换。    

代码实现:

html代码:

<div class="demo">
    <img class="an img" src="/test/img/2.png" width="500" height="500"/>
</div>

旋转代码:

.demo{
   text-align: center;
    margin-top: 100px;
}
@-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
.an{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}
.img{border-radius: 250px;}

实现效果:

72ecf3bd4847d7396cb1ec9fe1d4399.png

相关推荐:CSS教程

以上是css怎么设置图片不停旋转的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn