Html+Css实现九大行星动画效果

  前段时间项目中需要开发一个3D效果的环形菜单类似行星旋转,折腾了好久弄出了个样子,但是最后客户改版了不需要了,好不容易弄出来的吊炸天的效果不能这么浪费了,

  今年神舟十一号载人飞船顺利发射成功,中国航天技术越来越成熟,浩瀚的宇宙中有着无限的未知等着我们去探索,为表示对祖国航天事业的支持,用代码来表示是最合适的了,就用3D效果稍微修改修改画了一个九大行星星系图,当然因为冥王星被踢出了,大家不要纠结,上个效果图。

 

  这里的椭圆轨道、动画旋转全部使用CSS3来实现,并合理计算好每个行星的公转和自转的时间,让行星旋转的更加逼真,所用到的CSS的属性不是很多,主要就是animation和transform,属性的使用我也不在这里过多介绍了,主要是给大家分享一下实现的这个效果。

  考虑到CSS3的兼容性,用chrome和Firefox效果比较好,正所谓好马配好鞍,随着Html5和CSS3的不断流行,我们可以做出更加炫酷的页面。

  提供一下源码 https://files.cnblogs.com/files/gangang/planet.rar

  PS:在这里也感谢公司的视觉设计师提供的素材。

 

posted @ 2017-01-12 14:20  chen_gang  阅读(4736)  评论(2编辑  收藏  举报