现代 CSS

Image Effects

css3鼠标滑过动画

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

css3层次堆叠效果

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

CSS filter effects in action

CSS filter effects in action
这个DEMO效果是使用了几个CSS3新特性制作的,其主要由CSS3的filter特性,但这种特性到目前为止仅有webkit内核的浏览器支持,另外使用了CSS3的选择器,伪类选择器中的:nth-child()和:not()选择器的支持。同时采用inline-block布局。换句简单的话说,这个demo中使用inline-block布局,使用CSS3的filter和伪类结构选择器制作的特效。希望对大家有所帮助
返回顶部