CSS如何?手機中開關的執行個體分析

在很多設計圖上，會有如開關或者單選，今天我就來講講如何用css去實現動態開關。

html代碼中，是很簡單的

<input type="checkbox" id="1" class="checkbox"><label class="switch" for="1"></label>

下面是我們css代碼

<style>    .checkbox {        display: none;    }    .switch {        width: 50px;        height: 31px;        background: #56ACFE;        border-radius: 20px;        padding: 1px;        box-sizing: border-box;        display: inline-block;        margin-top: 15px;    }    .switch:after {        content: '';        box-shadow: 0 3px 8px 0 rgba(0,0,0,0.15), 0 1px 1px 0 rgba(0,0,0,0.16), 0 3px 1px 0 rgba(0,0,0,0.10);        width: 28px;        height: 28px;        background: #fff;        border-radius: 50%;        display: block;        margin-left: 1px;        float: left;        transition: all 0.5s;    }    .checkbox:checked+.switch:after {        margin-left: 20px;    }    .checkbox:checked+.switch {        background: #ccc;    }</style>

就這樣，就實現了這個設計圖上和手機上經常出現的開關。