超炫CSS3过渡及3D立体动作特效演示案例

CSS是现代网页设计中很重要的一个组成部分,好的CSS过渡转场动作和动画效果可以增强网页动感,提升网站的吸引度,可以很好地提升用户体验。我们可以在很多鼠标悬停、点击等动作上看到CSS特效。CSS 3是CSS的下一代升级版本,它将这一切又提升到了一个新的高度,可以让网页设计师们做出更酷更炫的网页特效,包括3D效果,更强的过渡特效等。本文收集了一些用CSS3制作的各种很酷很炫的网页特效,希望给做下一代HTML5+CSS3的网页设计师们提供一些参考,擦出一些创意的火花。

苹果iPhone 4S页面动画特效原理

苹果的iPhone 4S的Banner过渡特效很酷,此案例演示了iPhone 4S过渡的特效及原理。

iPad 3D旋转带表面光线变化特效

有很多iPad的图片设计都可以看到其表面的光线效果。这个CSS3案例展示了光线照在iPad,并且光线会随着iPad的立体旋转发生动态变化,共使用了包括3-D transform、渐变和遮罩等CSS 3特效。

生成3D云彩的CSS 3特效

此案例用CSS 3根据需要生成3D立体的云朵。你可以修改设置需要多少白色云朵、多少乌云,模拟蓝天白云、或乌云密布的天空。云朵会随着鼠标移动旋转,3D效果很强。很值得学习!

照片动态折叠CSS特效

很好的照片交互动态效果,当鼠标指针移动到照片上时,照片会显示折叠效果,并在右侧显示分享按钮供用户做进一步操作。此案例很好地应用了CSS的3D变形效果,提供了4种照片折叠的效果。

十二面体立体旋转变形特效

这个案例使用了CSS3和JavaScript,移动鼠标指针拨动屏幕上的十二面体产生立体旋转特效,十二面体在动画停止时破裂展开。是一个很好的复杂3D转动的案例。

3D折纸特效

此案例是一个将评论内容折叠,点击后像打开折叠的纸片一样显示评论内容的CSS 3特效,有很强的3D效果。

CSS 3生成动态图像动画特效

此案例中看到的画面中没有使用任何图片,动画中的图像全部由CSS 3生成,并且是完整的动画效果。不可思议!

[除非注明,tech迷文章均为原创,转载请以链接形式标明本文地址]

posted on 2012-07-03 21:32  Tech迷  阅读(913)  评论(0编辑  收藏  举报

导航