CSS3模拟实现太阳系

　　利用 CSS3 的圆角、变换和动画功能绘制太阳系。效果非常惊人有趣。我研究了几个月的 CSS3，了解其新功能，并体验了各浏览器的支持程度。几周前我放出了第一个实验，是关于 @font-face 和变换功能的。这次呢，我进行的圆角矩形实验，原以为会有些无聊，结果非常有意思。

　　主流浏览器中的太阳系,点击图片，看效果。请用Chrome浏览器。

　　主流浏览器中的太阳系

　　亲自体验下，我只用了 CSS 和 HTML 就完成了太阳系的简单模拟。

　　要获得最佳体验请使用 Safari 浏览，chrome 中动画有点卡。

　　细节

　　轨道和行星都是通过 border-radius 生成的，而动画是通过 –webkit animation 动画属性和变换功能实现的。以下是所用代码的示例：

　　圆角边框

　　ul.solarsystem li.sun {

　　width: 40px;

　　height: 40px;

　　-webkit-border-radius: 20px;

　　-moz-border-radius: 20px;

　　border-radius: 20px;

　　}

　　动画 与变换

　　ul.solarsystem li {

　　-webkit-animation-iteration-count:infinite;

　　-webkit-animation-timing-function:linear;

　　-webkit-animation-name:orbit;

　　}

　　ul.solarsystem li.earth span {

　　-webkit-animation-iteration-count:infinite;

　　-webkit-animation-timing-function:linear;

　　-webkit-animation-name:moon;

　　}

　　ul.solarsystem li.mercury {-webkit-animation-duration:5s;}

　　ul.solarsystem li.venus {-webkit-animation-duration:8s;}

　　ul.solarsystem li.earth {-webkit-animation-duration:12s;}

　　ul.solarsystem li.earth span {-webkit-animation-duration:2s;}

　　ul.solarsystem li.mars {-webkit-animation-duration:20s;}

　　ul.solarsystem li.asteroids_meteorids {-webkit-animation-duration:50s;}

　　ul.solarsystem li.jupiter {-webkit-animation-duration:30s;}

　　ul.solarsystem li.saturn {-webkit-animation-duration:60s;}

　　ul.solarsystem li.uranus {-webkit-animation-duration:70s;}

　　ul.solarsystem li.neptune {-webkit-animation-duration:100s;}

　　ul.solarsystem li.pluto {-webkit-animation-duration:120s;}

　　@-webkit-keyframes orbit {

　　from { -webkit-transform:rotate(0deg) }

　　to { -webkit-transform:rotate(360deg) } }

　　动画和变换功能目前只在 –webkit 浏览器中有效，其他主流浏览器——当然 IE 除外——只显示通过 border-radius 渲染的静态版本太阳系。

　　Internet Explorer 的平行扁宇宙：

　　IE 中的太阳系

　　嗯，Internet Explorer 眼里我们的宇宙无聊得欠扁。

　　如您所见，现在几行 CSS 就可以实现令人印象灰常深刻的效果。

　　哦，我承认……我把冥王星留下来了