css3

纯css3滚动效果

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

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手风琴效果2

纯css3手风琴效果2
这三个案例实际上就是用了两种技术,一个是radio来控制,一个是checkbox来控制,用radio表示只有一个可以展开(radio的只有一个是选中状态),而checkbox则表示可以同时展开多个(checkbox可以多个选中)。其实道理都是一样的,对radio或者checkbox的选中状态进行判断,然后决定其下面的兄弟元素的高度。

纯css3手风琴效果1

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

CSS3制作三角TIP框

CSS3制作三角TIP框
sofish在《CSS quiz: 带边 border 的三角形》制作介绍了使用border制作三角的兼容方案,很实用的一个东东。目前这种效果在Web中的运用是越来越多,有很多同学也想尽办法:有使用图片的,有使用border的,当然还有使用其他方法的。今天我要为大家介绍的是使用“::after”和"::before"配合border制作带边三角提示框,并为大家推荐一个在线制作工具。只不过这种方法不兼容IE8以及其以下的浏览器。如果要兼容IE,建议使用sofish的方法。

css3加载动画2

css3加载动画2
其实分析每个css3的案例动画,首先做的应该是先把动画停下来,了解下初始是怎么样的。如这个我们一开始看到这么绚的动画加载效果,一般都认为比较难,但是先把animation这个属性通过firebug禁用后,发现原来原理并不是很复杂,只是运用了border,border-radius和box-shadow,然后给就是rotate的animation。第二个和第一个原理一样,只是设置的border-color四个值不一样罢了。而第三个则是使用不同的延迟时间引发scale的动画。至于暂停按钮则是通过js来添加stop这个class,stop则设置了animation-play-state:paused;

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子元素选择器。

css3进度条动画

css3进度条动画
这个进度条是应用css3的渐变背景做出来的,然后应用background-size属性设置大小,然后以这个size为单位平铺。分析的时候你可以先禁用animation这个动画,然后可以用firebug设置background-repeat:no-repeat;来查看它一个单元的渐变背景。得到非动画的原理,我们再来研究动画部分,背景图片的运动,当然是用background-position了。

页面

返回顶部