当前第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中@有哪些用法
css如何清除input默认样式
css首行缩进怎么弄
css怎么设置div的透明度
css怎么让样式失效
css selectors是什么
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css实现div一直旋转的方法