方法:1、利用“img{animation:名称 时间 infinite}”语句给图片绑定动画;2、利用“@keyframes 名称{100%{transform:rotate(旋转角度)}}”语句设置动画的旋转动作,实现图片一直自转效果。

本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。
css3怎么让一个图片一直自转
在css中,可以利用animation属性来个元素绑定动画,animation属性可以控制动画时长和次数,语法为:
animation: name duration timing-function delay iteration-count direction;
其中属性值iteration-count定义动画应该播放多少次。当设置为infinite时,动画会一直播放。
再通过@keyframes规则配合transform:rotate设置动画的旋转动作。
立即学习“前端免费学习笔记(深入)”;
这是易秀购主题网转载的一款原创来至web主题公园的一款wordpress cms主题,非常适合做图片展示,或婚纱摄影类wordpress主题,采用了大气的网格化无缝设计,使列表以格子铺的方式排列,鼠标悬停的可以出现文章的简介。网站上方可以书写自己的广告语,图片也是可以替换掉的,图片会随着鼠标的移动而轻移,并且在鼠标滚动的时候,下面的模块会直接遮盖这个区域,这款wordpress cms主题视觉效果
示例如下:
Document
@@##@@
输出结果:
(学习视频分享:css视频教程)









