对于网页开发人员来说，他们现在使用的设计语言正处在一个过渡的高峰期，因为CSS3和HTML5在不久的将来会成为网页设计语言的标准，目前它们已经部份被应用于一些主流浏览器当中了。在加强与用户之间的互动性及提高用户体验方面，CSS3和HTML5正逐渐赋予我们一种新的网页设计方式。 CSS3到底能有多酷? 看完下面的10个实例及其演示你才会真正领略到其不凡的威力！
1. Our Solar System－我们的太阳系
上图的这个特效（特效实现原理）仅仅运用了CSS3的三个属性：
border-radius, transform 和 animation就向我们展现了太阳系中行星的运行轨道，在左边行星名字上鼠标划过会出现一个动画式的说明性提示。你想知道它是如何实现的吗？看看这个教程就明白了：CSS3动画提示教程。动画提示效果需在基于WebKit的浏览器（Google Chrome 或 Safari）上才会看到。 2. CSS3 Ads Versus Flash Ads－CSS3与Flash在实现广告显示上的比拼
利用Flash实现的广告展示向来名声狼籍，对于读者用户体验也不友好，容易被一些相关的应用程序所屏蔽。但是CSS3实现的广告展示却不会轻易受到屏蔽，这也是它优点之一。
3. CSS3-Man—CSS3动画
Spider-Man（蜘蛛侠）：60年代的动画系列，采用了CSS3的
transform, @key-frame 和 rotate三个属性制作而成，附加上一些jQuery特效用来预加载图片，同时应用了HTML5以嵌入音频。相关教程：CSS3动画系列的工作原理。 4. The Man From Hollywood—来自好莱坞
基于kinetic typography制作的动画系列，主要运用了CSS高级选择器及CSS3的动画特效，加上一些JavaScript。
5. Anigma
CSS3实现的谜宫游戏，声音的实现采用了HTML5的
<audio> 标签。 [adsense] 6. Animated Polaroids－动画人造偏光
演示效果：鼠标划过其中的一张图片，该图片就会靠前。采用了transition, transform这两个属性，还有动态伪类选择器以及样式属性box-shadow。这里查看相关教程： the tutorial。 7. CSS3 Music Player Menu—CSS3音乐播放器菜单
应用HTML5的
<audio> 及 <video>接口，CSS3的gradient, border-radius, box-shadow 属性。相关教程可看：CSS3音乐播放器菜单制作教程。 8. Sliding Vinyl with CSS3
采用HTML5的
<audio> API接口。相关教程：ZURB Playground。 9. Gabriel Sharp’s Small Planet
CSS3实现的日落日升动画特效，其属性
@keyframes的威力真正不可小视，我敢说这是本文最精彩的一幕了，不看绝对会后悔！此特效支持的浏览器需要Safari 或 Chrome。 10. Falling Leaves－落叶
这一效果的实现借助于CSS3的
animate属性，你可以在观看演示时查看一下其网页源代码，看看它到底是如何工作的。相关教程可到这里参考:blog post，介绍animate 属性的使用方法。 原文：sixrevisions