純css寫一個switch開關

標籤：img   效果   idt   html   ado   簡單   order   pad   int   

這樣的簡單的開關效果

1、html

<div class="switch-box">    <div class="bg_con">        <input id="checked_1" type="checkbox" class="switch"  value="0" />        <label for="checked_1"></label>    </div></div>    

2、css

.switch-box{    width:42px;} .switch-box .switch{    display:none;} .switch-box label{    position:relative;    display: block;    padding: 1px;    border-radius: 24px;    height: 22px;    margin-bottom: 15px;    background-color: #eee;    cursor: pointer;    vertical-align: top;    -webkit-user-select: none;} .switch-box label:before{    content: ‘‘;    display: block;    border-radius: 24px;    height: 22px;    background-color: white;    -webkit-transform: scale(1, 1);    -webkit-transition: all 0.3s ease;} .switch-box 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);    -webkit-transition: all 0.3s ease;} .switch-box .switch:checked~label:after{    -webkit-transform: translateX(9px);} .switch-box .switch:checked~label:before{    background-color:#de0b23;}

 

純css寫一個switch開關