好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

html5教程-使用CSS3绘制我们的太阳系

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

&nbs p;

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

一、效果抢先

下图为在Firefox3.6下的效果截图:

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

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

二、主要代码展示

实现的两个 关键点 是 圆 角和变换,也就是CSS3中的 border-radius 和Anim­a­tions & # 038; Transforms属性,其对应的CSS代码如下:

border-radius

ul.solar Sys tem li.sun {     width: 40px;     h ei ght: 40px;     - webkit -border-radius: 20px;     -moz-border-radius: 20px;     border-radius: 20px; } 

Anim­a­tions & Transforms

ul.solarsystem li {     -webk IT -animation -i teration-count:infinite;     -webkit-animation -t iming-function:linear;     -webkit-animation-n am e: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.aste ROI ds_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(0 deg ) }  to { -webkit-transform:rotate( 360 deg) } } 

Anim­a­tions 和 trans­itions 属性目前仅在webkit核心的浏览器下有作用,其他对此不支持的浏览器表现就是静态的。

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

三、不成器的IE

前段时间,一位日本的工程师用CSS3画了个很可爱的多来A梦,在IE的效果就是一堆方方脸,整个画面很囧!这里,也是类似,美丽的太阳系在IE浏览器下就成了一个个装大便的方 盒子 ,真是让人心寒 (一 股寒风吹过,chuyo~~~)。

四、结语

本文其实没有多少内容,论技 术 ,像 transition 和 animate ,我之前已经做过介绍,这里也 不想 再重复,可以说,就内容而言,效果的展示更多些。其他我也不想多说什么,只是心里默默期待该死的IE早点滚蛋~~

(本篇完)

觉得 可用,就经常来吧! 欢迎评论哦!  html5教程 ,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是 为你收集整理的 html5教程-使用CSS3绘制我们的太阳系 全部内容,希望文章能够帮你解决 html5教程-使用CSS3绘制我们的太阳系 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于html5教程-使用CSS3绘制我们的太阳系的详细内容...

  阅读:60次