现代 CSS

css3 download按钮设计

css3 download按钮设计
本实例主要应用gradient,然后使用box-shadow和border-raidus生成一个看起来很酷的按钮。然后download文字和版本文字分为两层,download文字层的z-index大于版本文字的z-index,鼠标滑过的时候改变download文字的宽度,露出下面的版本文字层。

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大背景运动
其实这个的大背景运用和之前背景运动的那个demo,核心点都是一样的,关键就是animation对背景定位的改变。只不过这里我们在一个标签中同时应用了三张图片,注意多背景图片时其层次与其书写顺序有关,其层次高低随着书写顺序依次递减,所以第一张图片在最高层,所以这个时候千万不要定义背景色啊,不然会把后面的全部覆盖了。如果要写背景色的话,请在最后一张图片上面加上。同理你可以做个简单的飘雪或蒲公英散落等一些零散的效果,当然首先得把背景图片设计好。

纯css3列表切换动画

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

css3导航设计1

css3导航设计1
本实例通过:before和:after生成高度和宽度透明度都为0且背景为渐变的两个内容,两个不同点在于绝对定位的位置一个为left,一个为right,然后渐变背景的方向刚好相反;最后当鼠标滑过改变高度宽度及透明度,就完成了该动画。因为是对:hover状态下的:before和:after生成的内容进行宽度变化,所以该实例如同先前的那个:hover状态下的激发伪元素动画一样,webkit内核是不支持的。

css3标题设计

css3标题设计
本实例主要是对:before及:after的应用,比较初级,浅显易懂,适合入门。第一个使用border-left和负margin,跟css3没有关系,就是应用了rgba这个属性,使border的颜色有一定的透明值;第二个运用:before和:after生成两个三角叠加起来;第三个背景应用了linear-gradient,然后加上:before和:after生成的三角左右两边各一个;第四个则应用了:after生成元素,然后box-shadow生成阴影,再加上rotate旋转一点角度。这四个虽然比较简单,但是还是非常实用的。

css3面包屑设计

css3面包屑设计
这里总共有四种面包屑效果,其中第一种运用:before和:after,运用border生成同等大小的尖角,叠加起来左右错动1px;第二个还是运用:before和:after,运用border生成不同的尖角,一个在左一个在右;第三个是运用一个:after生成一个正方形,设置border-radius然后rotate旋转45度;第四个直接运用水平扭曲就skewX就可以了。

css3选项卡标题样式设计3

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

页面

返回顶部