纯css3手风琴效果1
本实例通过对radio按钮的状态判断来实现折叠效果。主要应用的是兄弟元素选择器~,注意这个兄弟元素选择器只选择后面的兄弟元素,对于同级的前面的兄弟元素css3还没有响应的选择器。然后综合应用:before和transition来实现前面图标的切换及高度的伸展动画。这个高度的伸展变化必须设置一个具体的值,如为auto则没有transition动画效果,只是切换而已。
![结一](https://static.fequan.com/vueconf/img/default_avatar.png)
Lightbox效果以往都是依靠jQuery插件或者别的JavaScript脚本来实现,今天开始为大家提供几个纯CSS3制作的Lightbox效果。今天这个Lightbox效果使用的是input[type=radio]配合CSS3的相邻兄弟元素选择器(E + F)来实现,这种制作方法最关键的地方是结构的配合,以及label的for属性与元素的id属性配合一致,并且运用了display:table属性实现弹出层的图片居中效果。详细的请看下面的代码。