使用CSS3绘制我们的太阳系

这篇文章发布于 2010年05月31日，星期一，22:52，归类于 CSS相关。阅读 61051 次, 今日 2 次 5 条评论

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=843

原文地址：http://neography.com/journal/our-solar-system-in-css3/

一、效果抢先

下图为在Firefox3.6下的效果截图：
Firefox3.6下效果截图张鑫旭-鑫空间-鑫生活

在Firefox浏览器下，我们可以看到静态的太阳系效果图。但是，最佳的效果远不止如此。此太阳系效果图其实还带有动画效果，只是目前的Firefox版本不支持animate动画，所以看不到动画效果，如果您使用的是Chrome浏览器或是Safari浏览器，那么你可以看到类似下面视频的太阳系的CSS3模拟动画效果。

您可以狠狠地点击这里：CSS3下的太阳系效果demo

二、主要代码展示

实现的两个关键点是圆角和变换，也就是CSS3中的border-radius和Animations & Transforms属性，其对应的CSS代码如下：

border-radius

ul.solarsystem li.sun {
    width: 40px;
    height: 40px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Animations & Transforms

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) } }

Animations和transitions属性目前仅在webkit核心的浏览器下有作用，其他对此不支持的浏览器表现就是静态的。

关于animate的一些知识，您可以参见我之前的“CSS3 animate实现图片墙3D翻转效果”这篇文章。