SVG动画漂亮Checkbox复选框插件_纯Css3构建的Checkbox美化效果

HTML结构示例
<div class="checkboxWrapper theme2">
    <input type="checkbox" id="sample2">
    <label for="sample2">
        <i>
			<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
				<circle fill="none" stroke="#B7B7B7" stroke-width="3" stroke-miterlimit="10" cx="25.11" cy="24.883" r="23.519"/>
				<path fill="none" stroke-width="3" stroke-miterlimit="10" d="M48.659,25c0,12.998-10.537,23.534-23.534,23.534
				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"/>
            </svg>
        </i>
    	Emerald Theme
    </label>
</div>
相关css3代码
.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;
}