switch开关的制作

HTML代码:

<div class="container">
        <div class="bg_con">
            <input id="checked_1" type="checkbox" class="switch" />
            <label for="checked_1"></label>
        </div>
</div>

CSS代码：

<style type="text/css" rel="stylesheet">
.switch{
        display:none;
    }
    label{
        position:relative;
        display: block;
        padding: 1px;
        border-radius: 24px;
        height: 22px;width:40px;
        margin-bottom: 15px;
        background-color: #b0b0b0;
        cursor: pointer;
        vertical-align: top;
        -webkit-user-select: none;

user-select: none;
    }
    label:before{
        content: '';
        display: block;
        border-radius: 24px;
        height: 22px;
        background-color: white;
        -webkit-transform: scale(1, 1);

transform: scale(1, 1);
        -webkit-transition: all 0.3s ease;

transition: all 0.3s ease;

    }
    label:after{
        content: '';
        position: absolute;
        top: 50%;  
        left: 50%;  
        margin-top: -11px;  
        margin-left: -11px;
        width: 22px;
        height: 22px;
        border-radius: 22px;
        background-color: white;
        box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);
        -webkit-transform: translateX(-9px);

transform: translateX(-9px);
        -webkit-transition: all 0.3s ease;

transition: all 0.3s ease;
border:1px solid green;
    }
    .switch:checked~label:after{
        -webkit-transform: translateX(9px);

transform: translateX(9px);
    }
    
    .switch:checked~label:before{
        background-color:green;
    }  
</style>

效果图： 

扩展：①A~B{ }表示A之后出现的所有B，且A、B有相同的父元素。

②transition：all 0.3s ease  过渡。transition-property:all/属性    transition-duration：多长时间完成该动画。transition-timing-function：ease/速度曲线   transition-delay：延迟多长时间执行.

③transform：转变。transform:translateX(x); //x轴平移     rotate(angle);//旋转度数     scale(x,y);// 缩放    

  skew(x-angle,y-angle);//倾斜转换      matrix(n,n,n,n,n,n);//2D转换[矩阵]

④user-select：none;表示文本不能被选中。