现代 CSS

rgba

css3标题设计

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

纯css3滚动效果

纯css3滚动效果
看到该实例标题的时候,表示心情十分激动然后再加上一点忑忑,因为以前看过类似的,但是都比较有缺憾,不那么完美。可是这个媲美从前所有的纯css3打造的滚动效果,可以堪称完美了(除了没有导航控制)。只因制作巧妙精美,所以我只表示欣赏而不好加以评论,感兴趣的话大家还是自己手动研究下为好。

css3鼠标滑过动画

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