css實現手機中開關（開關外掛程式）

標籤：css   開關   單選   

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

650) this.width=650;" src="https://s1.51cto.com/oss/201710/20/6ef1c4dc7cf6cefc2ab0bf8038c40092.jpg-wh_500x0-wm_3-wmp_4-s_2865585867.jpg" title="2017-10-20_163712.jpg" alt="6ef1c4dc7cf6cefc2ab0bf8038c40092.jpg-wh_" />

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>

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

如果對你能有協助的話，麻煩點贊，如果有意見或者建議的話，私信我哦！

我會繼續努力積攢經驗的，會給大家不定時分享基礎知識點的*-*，關注我哦！

本文出自 “前端開發” 部落格，轉載請與作者聯絡！

css實現手機中開關（開關外掛程式）