我的屏幕左上方有一个星形图像想要连续旋转.所以任何人都可以告诉我如何让图片连续旋转浏览器Mozilla Firefox,Google Chrome!?
[Css位置类型为’绝对’且图像分辨率:25 * 25]
[Css位置类型为’绝对’且图像分辨率:25 * 25]
解决方法
@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } img.star { -webkit-animation-name: rotate; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }
添加-moz-transform / animation,-ms-transform / animation等规则以支持其他浏览器.
你也可以制作动画GIF :).
更新
(对于反向旋转,从’从’和’到’翻转)
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } img.star { animation-name: rotate; animation-duration: 0.5s; animation-iteration-count: infinite; animation-timing-function: linear; }
速记:
img.star { animation: rotate 0.5s infinite linear; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。