html switch效果,【Microanswer】-【CSS】css实现仿IOS的switch开关效果

重要声明：本文章仅仅代表了作者个人对此观点的理解和表述。读者请查阅时持自己的意见进行讨论。

一、先看效果

二、再看代码

1、html布局代码

2、css样式代码

/* 对开关整体样式设定 */

label.ios-switch {

position: relative;

display: inline-block;

cursor: pointer;

margin: 0;

padding: 0;

}

/* 首先隐藏input输入框 */

label.ios-switch input[type="checkbox"] {

display: none;

}

/* 确定switch开关的盒子模型的大小和边框效果,以及[关]的状态下背景颜色和边框颜色*/

label.ios-switch input[type="checkbox"]+i {

display: block;

width: 108px;

height: 50px;

box-shadow: 0 0 3px black inset;

border: 2px solid gray; /* 边框颜色 */

border-radius: 9999px; /* 将圆角设置为一个较大的值，可以实现两边呈现半圆形的效果。 */

background-color: #ffffff; /* 背景颜色 */

-webkit-transition-duration: 300ms; /* 动画过度时长 */

-moz-transition-duration: 300ms;

-ms-transition-duration: 300ms;

-o-transition-duration: 300ms;

transition-duration: 300ms;

}

/* 确定[开]的状态下背景颜色和边框颜色 */

label.ios-switch input[type="checkbox"]:checked+i {

background-color: rgba(0, 211, 0, 1); /* 背景颜色 */

}

/* 确定[关]状态下的指示圆块的样式，这些样式也会作用于开状态*/

label.ios-switch input[type="checkbox"]+i::before {

content: ' ';

position: absolute;

width: 55px; /* 圆块的宽度 */

height: 46px; /* 圆块的高度 */

background-color: #ededed; /* 关闭时背景色 */

box-shadow: 0 0 4px #000000;

border-radius: 9999px;

left: 2px;

-webkit-transition: inherit;

-moz-transition: inherit;

-ms-transition: inherit;

-o-transition: inherit;

transition: inherit;

}

/* 确定[开]状态下的指示圆块的样式 */

label.ios-switch input[type="checkbox"]:checked+i::before {

left: 50px; /* 开启时划过的距离 */

background-color: rgba(255, 255, 255, 1); /* 背景颜色 */

}