提高篇

css3 3D动画效果

css3 3D动画效果
呵呵又来一个3D制作,就不相信搞不定3D是吧。多看几个demo,多实践下,整个简单的3D原来也没想象的那么难的,还是可以搞定的。这个案例出现的还是很早的,只是当时只拿来欣赏吧,现在终于可以拿过来分析分析了。本实例先给li元素设置一个透视值为500px,然后给图片和文字信息都设置一个Y轴上的旋转30度,即rotateY(30deg),然后要实现文字和图片有个层级的效果,就给文字设置了Z轴上的偏移,即translateZ(30px),这样一个3D效果就出来了,至于动画部分就是hover的时候rotateY为0。这个demo问世的时候只有谷歌浏览器支持,所以请用google浏览器查看效果,至于download的文件已经经过我的修改,不过鼠标滑过的时候还是有bug,不太明白为什么,希望高手可以指点下。

css3 3D图片展

css3 3D图片展
再来一个css3 3D效果的实例,哈哈。今天在群里看到有人推荐张鑫旭的css3 3D文章,去看了下,太棒了,想学css3 3D特效的必备学习参考资料啊,所以晚上回来更新了下上一篇文章,把那篇文章的地址贴进去了。顺便再来一个css3 3D特效,不管会不会,观赏下开开眼界吧。注意demo为wekit版本(为了尊重作者我们贴出的demo地址都为原来的地址,而download则全部从本站下站),如需查看火狐版请download

css3图片与文字3D transform切换

css3图片与文字3D transform切换
这是个3D的切换效果,不太明白,在我的概念里还没有建立好一个3D模型,不知道如何把一个二维的图形如何转成三维。更谈不上动画了,所以这个案例对于我来说,暂时只是欣赏。如有明白的可以给讲一下,先谢过。

纯css3列表切换动画

纯css3列表切换动画
本实例的思路和之前说的用radio来控制手风琴效果有异曲同工之效。主要应用radio单选按钮来确认状态,然后对这个状态下的兄弟元素进行css控制。当然这里不比手风琴有几个radio就有几个内容,这里是一个内容,所以所有的radio应该和这个内容是兄弟元素,以便使用兄弟元素选择器~。然后对各个状态下的内容进行css控制,或显示或隐藏或浮动等。

37个CSS3 Patterns Gallery

今天在《Web页面的纹理背景设计与资源》一文中向大家推荐了一些有关于Web上的纹理背景资源以及制作工具等,其中Lea Verou大师使用纯CSS3制作的纹理背景最吸引我,于是我花了几天的时间整理了一份37种CSS3制作的纹理背景图。这份DEMO能兼容Webkit和Firefox浏览器,其他浏览器没有测试(Lea Verou只能在firefox显示正常),虽然很多代码是copy了Lea Verou大师的,但还是从中学到了不少东西,最起码对CSS3的渐变和背景尺寸等属性有了进一步的了解与加深,现在整理出源码与大家分享。希望大家喜欢。

css3选项卡标题样式设计3

css3选项卡标题样式设计3
这是第三个tabs的标题设计了,这次应用的又跟上两个不是一样的技术。这里用了:after来生成了,然后对生成的内容水平方向上扭曲skewX来达到斜切的效果。当然li的margin距离要刚好等于生成a:after生成内容的宽度。然后就是注意box-shadow了。注意火狐14.0更新后,skew得写成skewX或skewY分别表示水平方向和竖直方向偏移,这里它的demo用的是skew,所以火狐下并没有斜切的效果,我们可以firebug手动添加。

css3选项卡标题样式设计2

css3选项卡标题样式设计2
本实例的tabs斜角效果跟border没有一毛钱关系了,呵呵也跟:before和:after没有关系,却是运用了渐变背景制作的。给了一个角度的渐变,由transparent到红色的220度渐变。然后设置了一个box-shadow的左右偏移为负,使右侧看起来颜色比较深。

css3选项卡标题样式设计1

css3选项卡标题样式设计1
说起来惭愧,这个实例以前看起来的时候,看得莫名其妙,一时云里雾里。于是静下心来仔细研究下,才终于发现这个窍门。这里我们看到的选项卡tabs标题的高度并不是由height来撑起来了,各位firebug就可以知道了,设置的height是为0,然后line-height为30px,其实这个还不是关键,关键在于设计了border-bottom为30px。至于上面的那个斜角效果则是border-right为transparent。鼠标滑过的颜色是通过改变border-bottom-color来改变的,至于重叠的部分则是用了margin-right为负值。没有:before&:after一样拿下斜角效果。不得不说这又是border的一个杰作,加上上一个实例,不得不感叹我们对于这个border生成三角形的效果运用还是太基础啊,人家这才是高水平的应用。

创建一个褶皱带

创建一个褶皱带
本实例主要是对:before,:after和rotate的应用。其实神来之笔在于对border的应用,一般来说我们经常会使用宽高为0,然后再运用border来设计一个三角出来,可是这里是应用border三角和一个宽度或高度的结合,设计出来了我们看到的向上折叠的效果。正好:before生成一个同色的向上折叠,:after生成一个阴影色的旋转下的折叠。

CSS3 Full Background Slider

CSS3 Full Background Slider
今天在365psd上看到一个psd效果,很有意思,想着能不能转成web页面,这问题想得太SB了,然后接着想,转成带有css3的动画效果。那转成什么呢?思来想去做了一个全屏背景图的幻灯片效果。虽然是一个简单的demo,但里面集合了CSS3众多属性,从伪结构选择器,到圆角,阴影以及动画等。

页面

返回顶部