当前第2页 返回上一页
2、然后使用@keyframes规则创建一个动画rotate
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | @-webkit-keyframes rotate{
from{-webkit-transform: rotate(0deg)}
to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{
from{-moz-transform: rotate(0deg)}
to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{
from{-o-transform: rotate(0deg)}
to{-o-transform: rotate(359deg)}
}
@keyframes rotate{
from{transform: rotate(0deg)}
to{transform: rotate(359deg)}
}
|
3、最后，给div指定animation即可。
1 2 3 4 5 6 7 8 9 10 | #xuanzhun{
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-webkit-animation: rotate 3s linear infinite;
-moz-animation: rotate 3s linear infinite;
-o-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
}
|
效果：
以上就是css实现div一直旋转的方法的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
css的类选择器是怎么样的（代码）
如何使用css解决浮动元素父元素的高度塌陷问题？（代码示例）
css怎么设置外边距
css是用来做什么的?
怎么查看css文件
推荐六款移动端 ui 框架
background-image属性怎么用
css如何实现元素不随滚动条滚动
css punctuation-trim属性怎么用
一招搞定css相对原点定位背景图片
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css实现div一直旋转的方法
