这是一款效果非常炫酷的CSS3复选框checkbox动画特效。这组复选框动画特效共3种效果,它们都是在原生checkbox元素的基础上进行了美化,在用户点击复选框的时候制作出非常酷的动画效果。
使用方法
HTML结构
普通的HTML checkbox复选框控件的样式非常的平淡。在现代网页设计中,我们可以通过CSS3来为它设置更加漂亮的外观和动画特效。通过CSS的@keyframe属性,我们就可以制作出各种神奇的复选框动画特效。
在这些复选框动画的DEMO中,使用的都是无序列表结构。每一个列表项中都带有一个元素和一个元素。
项目经理
网页设计师
网站技术员
SEO
IT技术员
客户服务代表
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的制作方法基本相同,可以参考下载的源文件。