HTML5 SVG炫酷checkbox复选框动画特效

当前位置:主页 > Html5库 > SVG > HTML5 SVG炫酷checkbox复选框动画特效
HTML5 SVG炫酷checkbox复选框动画特效
分享:

    插件介绍

    这是一款HTML5 SVG炫酷checkbox复选框动画特效。该checkbox动画特效使用svg来构建复选框效果,然后通过CSS3动画来控制复选框的选中和取消选中状态,效果非常炫酷。

    浏览器兼容性

    浏览器兼容性
    时间:2017-04-24
    阅读:
麦子学院
简要教程

这是一款HTML5 SVG炫酷checkbox复选框动画特效。该checkbox动画特效使用svg来构建复选框效果,然后通过CSS3动画来控制复选框的选中和取消选中状态,效果非常炫酷。

使用方法

在页面中引入fency-checkbox.css文件。

<link href="path/to/css/fency-checkbox.css" rel="stylesheet">
                
HTML结构

一个SVG checkbox复选框的基本HTML结构如下:

<div class="checkboxWrapper theme1">
    <input type="checkbox" id="sample1">
    <label for="sample1">
        <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>
        CheckBox
    </label>
</div>            
                

其中,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类。

网友评论