:checked

CSS3制作Lightbox效果

作者：大漠 日期：2012-10-18 点击：385
Lightbox
:checked
CSS3制作Lightbox效果

Lightbox效果以往都是依靠jQuery插件或者别的JavaScript脚本来实现，今天开始为大家提供几个纯CSS3制作的Lightbox效果。今天这个Lightbox效果使用的是input[type=radio]配合CSS3的相邻兄弟元素选择器(E + F)来实现，这种制作方法最关键的地方是结构的配合，以及label的for属性与元素的id属性配合一致，并且运用了display:table属性实现弹出层的图片居中效果。详细的请看下面的代码。

阅读全文

css3复选框

作者：结一 日期：2012-09-16 点击：1040
css3
:checked
:before&:after
gradient
入门级
css3复选框
本实例主要应用了checkbox的:checked状态来设置其同级后面的label元素的样式及:before&:after生成的内容。所以我们看到的样式其实不是checkbox的，而是其同级后面的label元素的。
阅读全文

纯css3列表切换动画

作者：结一 日期：2012-09-05 点击：1050
css3
transition
:checked
box-shadow
提高篇
纯css3列表切换动画
本实例的思路和之前说的用radio来控制手风琴效果有异曲同工之效。主要应用radio单选按钮来确认状态，然后对这个状态下的兄弟元素进行css控制。当然这里不比手风琴有几个radio就有几个内容，这里是一个内容，所以所有的radio应该和这个内容是兄弟元素，以便使用兄弟元素选择器~。然后对各个状态下的内容进行css控制，或显示或隐藏或浮动等。
阅读全文

纯css3手风琴效果2

作者：结一 日期：2012-08-29 点击：2468
css3
Accordion
:checked
gradient
box-shadow
提高篇
纯css3手风琴效果2
这三个案例实际上就是用了两种技术，一个是radio来控制，一个是checkbox来控制，用radio表示只有一个可以展开（radio的只有一个是选中状态），而checkbox则表示可以同时展开多个（checkbox可以多个选中）。其实道理都是一样的，对radio或者checkbox的选中状态进行判断，然后决定其下面的兄弟元素的高度。
阅读全文

纯css3手风琴效果1

作者：结一 日期：2012-08-29 点击：342
css3
Accordion
:checked
transition
提高篇
纯css3手风琴效果1
本实例通过对radio按钮的状态判断来实现折叠效果。主要应用的是兄弟元素选择器~，注意这个兄弟元素选择器只选择后面的兄弟元素，对于同级的前面的兄弟元素css3还没有响应的选择器。然后综合应用:before和transition来实现前面图标的切换及高度的伸展动画。这个高度的伸展变化必须设置一个具体的值，如为auto则没有transition动画效果，只是切换而已。
阅读全文
返回顶部