css3

css3时钟

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

CSS3制作3D立体分页导航

CSS3制作3D立体分页导航
收集了很多DEMO和相关的PSD,于是想能不能通过自己学的CSS3相关技巧,将有关PSD图效果转换成CSS3效果。灵光的冲动,让我开始做起了这件事情,今天开始我会开始制作一些CSS3的DEMO效果,而这些DEMO效果都是由对应的PSD转换过来的,换句话说,如果你不考虑兼容IE低版本的话,这些DEMO你都可以使用。那我们开始吧

css3 3D旋转正方体

css3 3D旋转正方体
再来一个3D的案例,本实例自谷歌,技术自然不用说了,那是一级棒。个人能力有限,我就挑简单的分析下呵呵。说下这个正方体的实现吧,先设置父级元素的transform-style:preserve-3d,然后定义各个面的宽高及绝对定位并设置scale3D为1.2倍,最后就是把各个面分别运用rotateX,rotateY,再运用translateZ拉开距离。至于旋转的运动则是设置父元素的animation从0到360deg的旋转。既然是google的案例,那肯定不支持火狐啊,不过只要换个前缀火狐也不是问题吧。

css3树形导航

css3树形导航
本实例主要是比较好看哈哈,然后使用了css3初级学习者一般不理解的:target这个伪元素,所以收纳。运用的css3有gradient生成渐变背景,:before生成前面的图标及二级菜单的箭头,:target来实现折叠效果,同时还应用了个transition来改变opacity的动画。当然这个案例其实左边的小图标还可以用font-face来制作,那样就更好了。

css3 icon导航

css3 icon导航
本实例主要应用了border-radius,transition,font-face。先设置一个宽度并设置overflow为hidden,然后鼠标滑过用transition来改变其宽度,以显示文字信息部分。至于三个icon,前面两个为font-face做的,后面一个为图片。

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

页面

返回顶部