行星介绍html页面布局,css3 html5实现太阳系行星公转动画实例

本文我们分享用css3的animation画一个太阳系恒星公转的动画，如何实现画椭圆的运行轨迹，最后结合css3的clip-path做一些比较特别的动画。

模拟太阳系行情公转动画最终的效果图如下：

css3的animation是通过关键帧的形式做出来的，首先设定一个动画的运行时间，然后在这个时间轴上的若干位置处插入关键帧，浏览器根据关键帧设定的内容做过渡动画。animation一般结合transform属性进行制作。以一个简单的例子说明，以一个div，让其从左到右运动，如下图左所未(需要点下图片播放)

先用css画出静态的图，然后再加动画的属性。整个工程完整的代码见这个Demo。html如下：

在轮子wheel加一个动画的属性，

.wheel{  　　animation: move 3s linear infinite;  }

这个的意思是动画的名字是move，时间轴是3s，速度是匀速，播放次数无限。然后move的关键帧keyframes如下：

  @keyframes move{          100%{              transform: translateX(350p