CSS3模拟实现太阳系

Alex Girón2010-06-10 11:22:09

  利用 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 就可以实现令人印象灰常深刻的效果。

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

上一篇:47个惊人的CSS3动画演示
下一篇:打败 IE 的葵花宝典:CSS Bug Table

  • >> more看看其他人的看法
  • Hi there, I want to subscribe for this weblog to take most recent updates, so where can i
    do it please assist.

  • 1 hes ... 2017-5-14 16:54 Sunday
  • }
  • You really make it appear so easy together with your presentation but I in finding
    this topic to be really something which I feel I'd by no means understand.
    It sort of feels too complicated and very vast for me. I am taking a look forward for your next put up,
    I will attempt to get the hold of it!

  • 2 min ... 2018-9-23 11:43 Sunday
  • }
  • Simply desire to say your article is as amazing. The clarity in your put up is just nice and that i can think
    you're knowledgeable on this subject. Well with your permission allow me to grab your RSS feed to stay updated with impending
    post. Thanks a million and please carry on the rewarding work.

  • 3 min ... 2018-9-27 23:56 Thursday
  • }
  • Hey just wanted to give you a quick heads up. The words in your article seem to be running off the screen in Firefox.
    I'm not sure if this is a formatting issue or something to do with browser compatibility but I thought I'd post to let you know.
    The style and design look great though! Hope you get the problem fixed soon.
    Thanks

  • 4 min ... 2018-9-29 05:16 Saturday
  • }
  • Hello there, I found your website via Google while searching for
    a similar topic, your website came up, it appears great.
    I've bookmarked it in my google bookmarks.
    Hi there, just was alert to your blog through Google, and found that it is really informative.

    I am going to be careful for brussels. I'll appreciate in the event you continue this in future.
    A lot of other people will likely be benefited from your writing.
    Cheers!

  • 5 min ... 2018-9-30 15:00 Sunday
  • }

有什么想说的吗?