Accordion

藤藤每日一练——Pure CSS3 Accordion Slider

藤藤每日一练——Pure CSS3 Accordion Slider

Accordion Slider 以前都是使用jQury或别的js脚本来制作,今天我们给大家展示一个纯CSS3实现的水平手风琴幻灯片播放的效果。这个效果有两个关键之处,第一是HTML结构中的input[type="radio"]是必备的,第二是样式通过radio的选中与未选中来控制对应的img显示和隐藏。这里采用的是css的兄弟元素选择器(~),这个是一个很好的应用。当然实现这种效果还可以通过“target”来实现,不过这种方法实现要借助js来显示默认的第一张图片,有兴趣的可以将这个案例改装一下。

纯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动画效果,只是切换而已。
返回顶部