大家好,本篇文章分享正圆行星轨道旋转动画特效,欢迎参考和指正。
效果图:
![b5b0ad835134a3f0b7755cfbb5ac981a.gif](https://img-blog.csdnimg.cn/img_convert/b5b0ad835134a3f0b7755cfbb5ac981a.gif)
正圆行星轨道旋转动画特效
HTML代码:
CSS代码:
知识点:
animation:是CSS3的动画属性,这里把animation绑定到tui-demo-7元素上,并指定该动画需要2.0秒完成,linear则表示动画从头到尾的速度都是相同的,infinite则表示无限次播放该动画。
@keyframes:该规则表示动画可以逐步从一个CSS样式改变为另一个CSS样式。这里0%是动画开头,100%是动画结束。
transform:该属性应用于2D元素或3D元素的转换,允许元素发生旋转,缩放,移动,倾斜等效果。rotate定义2D旋转,可以配置旋转角度。
最后注意下浏览器兼容问题,-webkit-,-ms-或-moz-,有问题可以留言,大家一起学习HTML+CSS基础入门开发。