表单/表格
炫酷CSS3复选框checkbox动画特效
PetitQ
这是一款效果非常炫酷的 CSS3 复选框 checkbox 动画特效。这组复选框动画特效共 3 种效果，它们都是在原生 checkbox 元素的基础上进行了美化，在用户点击复选框的时候制作出非常酷的动画效果。
HTML 结构
普通的 HTML checkbox 复选框控件的样式非常的平淡。在现代网页设计中，我们可以通过 CSS3 来为它设置更加漂亮的外观和动画特效。通过 CSS 的@keyframe 属性，我们就可以制作出各种神奇的复选框动画特效。在这些复选框动画的 DEMO 中，使用的都是无序列表结构。每一个列表项中都带有一个
也想出现在这里？联系我们吧
<ul>
<li>
<input type="checkbox" name="manager" id="manager" />
<label for="manager">项目经理</label>
</li>
<li>
<input type="checkbox" name="webdesigner" id="webdesigner" />
<label for="webdesigner">网页设计师</label>
</li>
<li>
<input type="checkbox" name="webdev" id="webdev" />
<label for="webdev">网站技术员</label>
</li>
<li>
<input type="checkbox" name="seo" id="seo" />
<label for="seo">SEO</label>
</li>
<li>
<input type="checkbox" name="itstaff" id="itstaff" />
<label for="itstaff">IT技术员</label>
</li>
<li>
<input type="checkbox" name="csr" id="csr" />
<label for="csr">客户服务代表</label>
</li>
</ul>
CSS 样式
在 CSS 样式中，首先将原生 checkbox 隐藏起来。
input[type="checkbox"] {
display: none;
}
然后在 label 元素上设置相对定位和一些 padding 值。接着需要使用到 label 元素的:before 和:after 伪元素，由于这里要使用到 Font Awesome 字体图标，所以将它的字体设置为 FontAwesome。
/* Checkbox Icons */label {position: relative;
padding-left: 30px;
font-size: 30px;
cursor: pointer;
color: #fff;
padding: 16px 28px 0 0;
}label:before, label:after {
font-family: FontAwesome;
font-size: 50px;
/*absolutely positioned*/position: absolute; top: 0; left: -49px; right: 10px;
}
接下来要做的事情是分别设置:before 和:after 伪元素为复选框选中和未选中状态时使用的图标。为了在 CSS 中使用 Font Awesome 图标，这里使用的是 unicode 版本的图标（所有 Font Awesome 字体图标和它的 unicode 值可以参考这里）。
label:before {
content: '\f096'; /*未选中状态的复选框 */
}label:after {
content: '\f00c'; /*选中状态的复选框*/
max-width: 0;
overflow: hidden;
opacity: 0.5;
font-size: 27px;
top: 16px;
left: -42px;
color: #f2ca27;
-webkit-transition: all 0.50s;
-moz-transition: all 0.50s;
-o-transition: all 0.50s;
transition: all 0.50s;
}
最后，通过 checkbox hack 技术，使复选框被选择的时候，label:after 伪元素产生动画效果。
input[type="checkbox"]:checked + label:after {
max-width: 25px;
opacity: 1;
margin-right: 90px;
}
以上是第一个 DEMO 的 CSS 代码，其它两个 DEMO 的制作方法基本相同，可以参考下载的源文件。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
