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

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

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

 

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

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

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

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

 

转载于:https://www.cnblogs.com/gangang/p/6087105.html