html+css3寫switch滑動開關

步驟構思：

1、利用checkbox選中和取消的特性

2、隱藏默認樣式，擴大label點擊熱區

3、用after、before兩個偽類元素實現動畫

IosButton綠色按鈕

實現效果

代碼如下：

<!-- HTML代碼 -->
<div class="switch-box">
    <input id="switchButton" type="checkbox" class="switch" />
    <label for="switchButton"></label>
</div>


/* CSS代碼 */
.switch-box {
    width: 48px;
}
.switch-box .switch {
    /* 隱藏checkbox默認樣式 */
    display: none;
}
.switch-box label {
    /* 通過label擴大點擊熱區 */
    position: relative;
    display: block;
    margin: 1px;
    height: 28px;
    cursor: pointer;
}
.switch-box label::before {
    /* before設置前滾動小圓球 */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -14px;
    width: 26px;
    height: 26px;
    border-radius: 100%;
    background-color: #fff;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.06);
    /* 通過transform、transition屬性控制元素過渡進而形成css3動畫 */
    -webkit-transform: translateX(-9px);
    -moz-transform: translateX(-9px);
    transform: translateX(-9px);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.switch-box .switch:checked~label::before {
    /* 語義：被選中的類名為"switch"元素后面的label元素里的偽類元素，進行更改css樣式 */
    /* 形成偽類結構選擇器：":"冒號加布爾值"checked" */
    /* " Ele1 ~ Ele2 "波浪號在css的作用：連接的元素必須有相同的父元素，選擇出現在Ele1后的Ele2（但不必跟在Ele1，也就是說可以並列）  */
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    transform: translateX(10px);
}
.switch-box label::after {
    /* after設置滾動前背景色 */
    content: "";
    display: block;
    border-radius: 30px;
    height: 28px;
    background-color: #dcdfe6;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.switch-box .switch:checked~label::after {
    background-color: #13ce66;
}

 

 

ToggleButton綠色按鈕

實現效果

代碼如下：

<!-- HTML代碼 -->
<div class="switch-box">
    <input id="switchButton" type="checkbox" class="switch" />
    <label for="switchButton"></label>
</div>


/* CSS代碼 */
.switch-box {
    margin: 100px auto;
    width: 40px;
}
.switch-box .switch {
    /* 隱藏checkbox默認樣式 */
    display: none;
}
.switch-box label {
    /* 通過label擴大點擊熱區 */
    position: relative;
    display: block;
    margin: 1px;
    height: 20px;
    cursor: pointer;
}
.switch-box label::before {
    /* before設置前滾動小圓球 */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background-color: #fff;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.06);
    /* 通過transform、transition屬性控制元素過渡進而形成css3動畫 */
    -webkit-transform: translateX(-9px);
    -moz-transform: translateX(-9px);
    transform: translateX(-9px);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.switch-box .switch:checked~label::before {
    /* 語義：被選中的類名為"switch"元素后面的label元素里的偽類元素，進行更改css樣式 */
    /* 形成偽類結構選擇器：":"冒號加布爾值"checked" */
    /* " Ele1 ~ Ele2 "波浪號在css的作用：連接的元素必須有相同的父元素，選擇出現在Ele1后的Ele2（但不必跟在Ele1，也就是說可以並列）  */
    -webkit-transform: translateX(9px);
    -moz-transform: translateX(9px);
    transform: translateX(9px);
}
.switch-box label::after {
    /* after設置滾動前背景色 */
    content: "";
    display: block;
    border-radius: 10px;
    height: 20px;
    background-color: #dcdfe6;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.switch-box .switch:checked~label::after {
    background-color: #409eff;
}

 

 

特別說明

1、形成偽類結構選擇器：元素+冒號+布爾值（例"input:checked"）

2、" Ele1 ~ Ele2 "波浪號在css的語義：作為選擇器【選擇出現在Ele1后的Ele2（但不必跟在Ele1，也就是說可以並列），連接的前后元素必須有相同的父元素】