CSS3模拟IOS滑动开关效果

关于“CSS3模拟iOS滑动开关效果”的攻略，我将按照以下几个方面进行详细的讲解：

关于“CSS3模拟iOS滑动开关效果”的攻略，我将按照以下几个方面进行详细的讲解：

1. 基本思路：
   通过CSS3实现拖拽交互，并根据滑动距离判断滑块当前状态，进而控制滑块颜色、背景等样式，实现类似于iOS系统中的滑动开关的效果。

2. 具体实现步骤：
   （1）HTML结构定义

<div class="ios-switch">
    <input type="checkbox" id="switch"/>
    <label for="switch"></label>
</div>

（2）CSS 样式设置

.ios-switch {
    width: 80px;
    height: 40px;
    position: relative;
    margin: 0 auto;
}
.ios-switch input[type=checkbox] {
    display: none;
}
.ios-switch label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    background-color: #A6A6A6;
    border-radius: 20px;
    transition: background-color .3s ease-out;
}
.ios-switch label::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 36px;
    height: 36px;
    background-color: #FFFFFF;
    border-radius: 50%;
    transition: transform .3s ease-out;
}
.ios-switch input[type=checkbox]:checked + label {
    background-color: #4CD964;
}
.ios-switch input[type=checkbox]:checked + label::before {
    transform: translateX(40px);
}

1. 样式解析：
   （1）将包含 iOS 滑动按钮的 div 设置为相对定位，并设置宽度、高度和居中定位。
   （2）隐藏 input[type=checkbox] 元素。
   （3）使用伪元素 ::before 来创建模拟拖动按钮，包括它的初始样式和选中状态样式，通过 translateX() 方法来控制它的位置。
   （4）当 input[type=checkbox] 元素被选中时，改变 label 的背景颜色。当 checked 状态改变时，拖动按钮跳到相应的状态。

2. 示例：
   我将提供两个不同示例演示该效果。

（1）示例一
- DEMO：https://codepen.io/hey-theme/pen/mdPmRpL
- （基于 Bootstrap 样式库进行开发）

（2）示例二
- DEMO：https://codepen.io/justd/pen/jEGbA
- （没有使用其他的框架或库）