自定义switch开关

switch开关

switch开关表示两种相反状态的切换，适用于触发开关。本文章代码摘自：http://www.css88.com/archives/5693

代码块

截图：

纯css实现：

html部分：
<input class="switch switch-animation" type="checkbox">

css部分：
<style>
    .switch {
        position:relative;
        width:52px;
        height:31px;
        border:1px solid #dfdfdf;
        background-color:#fdfdfd;
        border-radius:20px;
        -webkit-appearance:none;
        outline:none;

    }
    .switch:before {
        position:absolute;
        top:0;
        left:0;
        content:'';
        width:29px;
        height:29px;
        border-radius:50%;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }
    .switch:checked {
        border-color:#64bd63;
        box-shadow: #64bd63 0 0 0 16px inset;
        background-color: #64bd63;
    }
    .switch:checked:before {
         left:21px;
    }
    .switch-animation {
        transition: background-color ease 0.4s; 
    }
    .switch-animation:before {
        transition: left 0.4s;
    }

</style>