现代 CSS

css3

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了。

css3加载动画1

css3加载动画1
这是第一个纯css3的loading动画。这个demo的技巧在于先通过:before生成一个外围,这样就形成了两个圆圈,还是以前虚线框里面说的通过上下左右定位为-20px来扩大的外围的圆圈,这些都是静止的。正在运动的其实是一个空span标签设计出来的一个三角形,这里设置的颜色与背景色一直,所以看不出来,其实你可以设置为红色方便观察,就明白了。最后就是animation的运用了。

纯css3 lavalamp 菜单效果

纯css3 lavalamp 菜单效果

曾经我们对于jquery实现的lavalamp那是极度热爱啊,现在不用借助jquery,我们用纯css3实现了,过瘾啊。技术的关键在于在菜单的li最后先增加一个空元素来承载那个滑动的东西,再使用css3的兄弟元素选择器~,然后对于不同的li滑过的时候,设置承载滑动的那个元素的left位置。

页面

返回顶部