如何创建切换开关

第一步 - 添加 HTML：

第二步 - 添加 CSS：

/* 开关 - 滑块周围的框 */

.switch {

position: relative;

display: inline-block;

width: 60px;

height: 34px;

}

/* 隐藏默认 HTML 复选框 */

.switch input {

opacity: 0;

width: 0;

height: 0;

}

/* 滑块 */

.slider {

position: absolute;

cursor: pointer;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: #ccc;

-webkit-transition: .4s;

transition: .4s;

}

.slider:before {

position: absolute;

content: "";

height: 26px;

width: 26px;

left: 4px;

bottom: 4px;

background-color: white;

-webkit-transition: .4s;

transition: .4s;

}

input:checked + .slider {

background-color: #2196F3;

}

input:focus + .slider {

box-shadow: 0 0 1px #2196F3;

}

input:checked + .slider:before {

-webkit-transform: translateX(26px);

-ms-transform: translateX(26px);

transform: translateX(26px);

}

/* 圆角滑块 */

.slider.round {

border-radius: 34px;

}

.slider.round:before {

border-radius: 50%;

}

亲自试一试