transition

css3动画——垃圾桶

css3动画——垃圾桶
首先非常感谢丸子大师(http://i.wanz.im/)提供这个案例的DEMO源码。这是一个使用CSS3的transform和transition制作的一个动画效果,当鼠标处于悬停状态时,垃圾桶会打开,有一个小卡通被丢进垃圾桶。创意很有意思,实现很简单。如果丸子在花点时间将demo中的图片换成用css3写,就是一个纯CSS3的动画DEMO了,还有一个地方可以改变的,就是不用三个标签,使用CSS3的":before"和":after"来代替里面的子元素。这样就省去两个标签,有兴趣的同学可以尝试一下,在丸子的基础上进行修改,做成后,你会有一种成就感的。

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列表切换动画

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

css3鼠标滑过动画

css3鼠标滑过动画
本实例共有五个鼠标滑过的动画效果,但其实原理都是差不多。第一个是多加了一个空白的标签,来显示那个遮罩的三角形;第二,三,四都是对却是用border来生成的遮罩,至于第五个效果就比较复杂,不过原理都是一样的,实际应用也不需要那么复杂。所以只需把前面四个简单的学会了,第五个就当做欣赏吧,扩大自己的视野,以后举一反三的机会多的是。说到底,transition的动画变换来变换去,都是那么几个属性,关键在于对基本属性的把握及对动画效果的设计,多看点效果积累点,以后也可以做到得心应手。

css3层次堆叠效果

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

纯css3手风琴效果3

纯css3手风琴效果3
本实例主要是对css3的:target这个选择器的应用,通过:target这个状态来改变需要改变的元素。主要就是在设计html结构的时候得想一下,各个点击的href值对应各自要展开内容的id值。最有可能迷惑的就是:target这个选择器的运用,刚接触的时候还是有些晕的,多看看理解理解就好了。

纯css3手风琴效果1

纯css3手风琴效果1
本实例通过对radio按钮的状态判断来实现折叠效果。主要应用的是兄弟元素选择器~,注意这个兄弟元素选择器只选择后面的兄弟元素,对于同级的前面的兄弟元素css3还没有响应的选择器。然后综合应用:before和transition来实现前面图标的切换及高度的伸展动画。这个高度的伸展变化必须设置一个具体的值,如为auto则没有transition动画效果,只是切换而已。

页面

返回顶部