使用CSS3动画属性实现360°无限循环旋转【代码片段】
2024-10-18 22:28:34
使用CSS3的animation动画属性实现360°无限循环旋转。
代码片段：
<div id="test">
<img src="/CSS3/img/yinyue.png" id="change" /> //图片路径自定义
</div>
CSS样式书写如下：
#change{ position:absolute; right:200px; -webkit-animation:change 2s linear infinite;}
@-webkit-keyframes change
{
0%{-webkit-transform:rotate(0deg);}
50%{-webkit-transform:rotate(180deg);}
100%{-webkit-transform:rotate(360deg);}
}
搞定！！！当然，这里只写了chrome/Safari浏览器的兼容，其它的可再加上：
@-moz-keyframes change{***} 火狐
@-ms-keyframes change{***} IE
@keyframes change{***} W3C
Opera浏览器不支持animation属性！！！
最新文章
- WEB端实现打印
- spark on yarn 提交任务出错
- html5，音频代码
- JavaScript 闭包系列一
- 分析一个类似于jquery的小框架
- asp.net服务器控件onclick带参数
- Redis-benchmark测试Redis性能
- Android课程---视图组件的总结
- [转]从网页Web上调用本地应用程序（.jar、.exe）的主流处理方法
- orcale删除重复数据
- XSS挑战第一期Writeup
- D - Charm Bracelet 背包问题
- 菜鸟成长日记之新手备忘录-IOS开发第一个项目总结
- UIStackView相关
- Could not load the Tomcat server configuration at /Servers/Tomcat v7.0 Server at localhost-config.
- [转载]Linux编程 sockaddr_in 和sockaddr和in_addr详解
- iOS 使用UIBezierPath类实现随手画画板
- 征服恐惧！用 Vim 写 iOS App
- hbase_2
- 20171017数据处理sql