3种炫酷CSS3复选框checkbox动画特效

本篇文章主要介绍了"3种炫酷CSS3复选框checkbox动画特效"，主要涉及到相对定位方面的内容，对于HTMLjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 这是一款效果非常炫酷的CSS3复选框checkbox动画特效。这组复选框动画特效共3种效果，它们都是在原生checkbox元素的基础上进行了美化，在用户点击复选...

这是一款效果非常炫酷的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">SEOlabel>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;
}            

以上就介绍了3种炫酷CSS3复选框checkbox动画特效，包括了相对定位方面的内容，希望对HTMLjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播有兴趣的朋友有所帮助。

本文网址链接：http://www.codes51.com/article/detail_204288.html