本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。
css3怎么让一个图片一直自转
在css中,可以利用animation属性来个元素绑定动画,animation属性可以控制动画时长和次数,语法为:
animation: name duration timing-function delay iteration-count direction;
登录后复制
其中属性值iteration-count定义动画应该播放多少次。当设置为infinite时,动画会一直播放。
再通过@keyframes规则配合transform:rotate设置动画的旋转动作。
示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> img{ width:100px; height:100px; animation:fadenum 5s infinite; } @keyframes fadenum{ 100%{transform:rotate(360deg);} } </style> </head> <body> <img src="1118.01.png" alt=""> </body> </html>
登录后复制
输出结果:
(学习视频分享:css视频教程)
以上就是css3怎么让一个图片一直自转的详细内容,更多请关注Work网其它相关文章!