简要教程
这是一款HTML5 SVG炫酷checkbox复选框动画特效。该checkbox动画特效使用svg来构建复选框效果，然后通过CSS3动画来控制复选框的选中和取消选中状态，效果非常炫酷。
使用方法
在页面中引入fency-checkbox.css文件。
HTML结构
一个SVG checkbox复选框的基本HTML结构如下：
width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
S1.591,37.998,1.591,25S12.127,1.466,25.125,1.466c9.291,0,17.325,5.384,21.151,13.203L19,36l-9-14"/>
CheckBox
其中，theme1是该checkbox的颜色主题。fency-checkbox.css中内置了7种颜色主题，你也可以自己编写自己的颜色主题效果。
CSS样式
通用的SVG checkbox复选框的样式如下：
.checkboxWrapper{
display:block; /* you can replace with 'display:inline-block' if you want parent element inline */
}
.checkboxWrapper input[type="checkbox"] {
display: none;
}
.checkboxWrapper input[type="checkbox"] + label {
cursor: pointer;
display:block;
}
.checkboxWrapper input[type="checkbox"] + label i {
display: inline-block;
vertical-align: middle;
}
.checkboxWrapper input[type="checkbox"] + label path {
stroke-dashoffset: -189;
stroke: inherit;
stroke-dasharray: 189;
transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-o-transition: all ease-in-out 0.5s;
}
.checkboxWrapper input[type="checkbox"]:checked + label path {
stroke-dashoffset: 0;
}
定义一种颜色主题就是为SVG的stroke属性设置一种颜色，例如theme1的描边颜色为：
.theme1{
stroke:#1ABC9C;
}
控制SVG checkbox复选框尺寸的CSS样式如下：
.extraSmallCheckboxSize.checkboxWrapper input[type="checkbox"] + label i svg{
width:20px;
height:20px;
}
.smallCheckboxSize.checkboxWrapper input[type="checkbox"] + label i svg{
width:30px;
height:30px;
}
.mediumCheckboxSize.checkboxWrapper input[type="checkbox"] + label i svg{
width:40px;
height:40px;
}
.largeCheckboxSize.checkboxWrapper input[type="checkbox"] + label i svg{
width:50px;
height:50px;
}
.extraLargeCheckboxSize.checkboxWrapper input[type="checkbox"] + label i svg{
width:60px;
height:60px;
}
要控制尺寸，你需要做的事情就是在带有checkboxWrapperclass的父div容器上添加适当的class类。
本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端HTML5/CSS3频道！