transform

css3圆环形旋转

css3圆环形旋转
本实例看起来有点像太极,其实更如一块环形的玉佩,设计比较好看。先设计一个圆形填充一个135deg的两个颜色的渐变,各位一半。然后设计三个子元素为上中下的小圆,一个为浅色的与渐变背景的浅色的一样,一个为黑色的充当中间的孔,一个为深色的与渐变背景的深色一样,为了表现更佳,给这三个小圆各自应用了box-shadow生成阴影。然后就是父元素的animate转动360deg。

css3时钟

css3 clock
本实例纯css3打造,因为没有获取当前时间,所以初始化时间为12点,打开即开始走动。圆盘使用border-radius做成,然后一个:before生成中间的圆点,一个:after生成倒影。至于三个指针就是关键了,其高度及宽度不等,绝对定位于中间的同一圆点,然后以这点为坐标旋转,旋转使用动画一样,只是旋转一周的持续时间不一样,秒针为60s,分针为3600s,时钟为84600s。

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面包屑设计
这里总共有四种面包屑效果,其中第一种运用: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手动添加。

创建一个褶皱带

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

css3层次堆叠效果

css3层次堆叠效果
这种实例其实在css3刚出的时候就比较风靡了,也算是入门级的很好实例吧,还是很值得去练练手的。它主要是对css3的:before和:after的应用,当然再加上一些rotate的旋转及box-shadow的阴影,最后配以:hover来达到动画的效果。由于webkit内核不支持:hover之后其他元素的动画效果(如:hover:before;:hover *;:hover + *),所以该实例用webkit内核浏览器来看,鼠标滑过直接就到生硬的最后状态,没有动画过程。

css3 slideup box

css3 slideup box
本实例主要是对css3的transition属性的应用,同时应用了rotate旋转和nth-child子元素选择器。原理是先设置容器为一定的高度并overflow为hidden,然后标题的高度为整个高度且opacity为1,而内容为一定的rotate角度且opacity为0。当鼠标滑过的时候标题margin为负的容器高度,opacity为0,而内容的rotate为0,opacity为1。当然最关键的是我们的transition的应用,把这些变化动画化。而内容的背景图片就充分应用了nth-child子元素选择器。

页面

返回顶部