Total Pageviews

Tuesday 26 March 2013

10个超级有趣的CSS3特效

 对于网页开发人员来说,他们现在使用的设计语言正处在一个过渡的高峰期,因为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-framerotate三个属性制作而成,附加上一些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