[分享]css3开关切换按钮

CSS3的开关切换按钮是一种简单却又常用的网页元素，它可以用来切换网页的某些属性或状态，比如音乐播放、灯光开关等。下面是一个简单的CSS3开关切换按钮的代码实例： / 定义样式 / .switch {...

CSS3的开关切换按钮是一种简单却又常用的网页元素，它可以用来切换网页的某些属性或状态，比如音乐播放、灯光开关等。下面是一个简单的CSS3开关切换按钮的代码实例：

 /* 定义样式 */
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }

    /* 隐藏原生复选框 */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* 显示开关圆点 */
    .switch .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 34px;
    }

    /* 激活开关圆点 */
    .switch .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 50%;
    }

    /* 改变复选框选中状态时的样式 */
    input:checked + .slider {
        background-color: #2baa6c;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #2baa6c;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    } 

代码解释：

1. 首先定义一个class为switch的容器，设置其大小和定位属性。

2. 隐藏原生的复选框。

3. 定义一个class为slider的容器，用来展示开关的UI。通过设置cursor属性为pointer，当鼠标浮动在该区域时，会显示为手型。

4. 设置开关UI的样式，包括背景颜色、过渡等。

5. 通过:before伪元素，设置开关的圆点。在选中状态下，将圆点移动到右侧。

6. 为选中状态下和焦点状态下定义样式，使得开关UI更美观和易于交互。

7. 最后将复选框和开关UI连接在一起，使得用户点击开关UI时，可以改变复选框的状态。

总之，CSS3的开关切换按钮是一个非常有用的网页元素。利用CSS3的各种技术，我们可以很容易地创建出美观且易于交互的开关切换按钮。