div css如何实现一直旋转

这篇文章给大家分享的是有关css如何实现div一直旋转的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

css实现div一直旋转的方法:首先创建一个div元素,并给它一个id值,然后使用内联样式给div添加一些样式,接着使用“@keyframes”规则创建一个动画旋转;最后给div指定动画即可。

<强> css实现div一直旋转

1,首先创建一个div元素,并给它一个id值xuanzhuan,使用内联样式给div添加一些样式。

& lt; div  id=皒uanzhun",风格=翱矶?,30 px;,高度:,30 px;,背景颜色:,海蓝宝石;“在

2,然后使用@keyframes规则创建一个动画旋转

@-webkit-keyframes 旋转{ 　　,,,从{-webkit-transform:旋转(0度)} 　　,,,,{-webkit-transform:旋转(360度)} 　　} 　　@-moz-keyframes 旋转{ 　　,,,从{-moz-transform:旋转(0度)} 　　,,,,{-moz-transform:旋转(359度)} 　　} 　　@-o-keyframes 旋转{ 　　,,,从{-o-transform:旋转(0度)} 　　,,,,{-o-transform:旋转(359度)} 　　} 　　@keyframes 旋转{ 　　,,,从{变换:旋转(0度)} 　　,,,,{变换:旋转(359度)} 　　}

3,最后,给div指定动画即可。

# xuanzhun { 　　,,,-webkit-transition-property:, -webkit-transform; 　　,,,-webkit-transition-duration:, 1 s; 　　,,,-moz-transition-property:, -moz-transform; 　　,,,-moz-transition-duration:, 1 s; 　　,,,-webkit-animation:, rotate  3 s  linear 无限; 　　,,,-moz-animation:, rotate  3 s  linear 无限; 　　,,,-o-animation:, rotate  3 s  linear 无限; 　　动画:,,,,rotate  3 s  linear 无限; 　　}

效果:

感谢各位的阅读!关于“css如何实现div一直旋转”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

div css如何实现一直旋转