纯css 实现switch开关

最新推荐文章于 2024-04-12 17:01:15 发布

tomatoAndXihongshi

最新推荐文章于 2024-04-12 17:01:15 发布

阅读量451

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/tutouXiaoGe/article/details/129563431

版权

复选框用户点击选中的时候可以通过伪类选择器（:checked）来选中更改元素样式，可以通过这个更改其兄弟元素来实现switch

效果图

在这里插入图片描述

	<label class="switch">
        <input type="checkbox">
        <span class="slider"></span>
    </label>

 /* 定义开关的大小 */
    .switch {
        position: relative;
        display: inline-block;
        width: 90px;
        height: 40px;
    }
    /* 隐藏原本的复选框 */
    .switch input {
        display: none;
    }
    /* 开关背景 */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #eee;
        transition: .5s;
        border-radius: 30px;
    }
    /* 开关按钮 */
    .slider:before {
        content: "";
        height: 30px;
        width: 30px;
        border-radius: 20px;
        position: absolute;
        left: 8px;
        bottom: 5px;
        background-color: #aeaaae;
        transition: .4s;
    }
    /* 选中的时候更改起兄弟元素样式 */
    input:checked + .slider{
        background: green;
    }
    input:checked + .slider::before{
        content: "";
        position: absolute;
        /* 90-8-30-8 */
        background-color: #fff;
        transform: translateX(44px);
    }