css3 switch开关的实现

逃离我推掉我的手 2022-05-14 04:53 226阅读 0赞

<input type="checkbox" id="switch" /><label for="switch">Toggle</label>
    
    input[type=checkbox]{
        height: 0;
        width: 0;
        visibility: hidden;
    }
    
    label {
        cursor: pointer;
        text-indent: -9999px;
        width: 200px;
        height: 100px;
        background: grey;
        display: block;
        border-radius: 100px;
        position: relative;
    }
    
    label:after {
        content: '';
        position: absolute;
        top: 5px;
        left: 5px;
        width: 90px;
        height: 90px;
        background: #fff;
        border-radius: 90px;
        transition: 0.3s;
    }
    
    input:checked + label {
        background: #bada55;
    }
    
    input:checked + label:after {
        left: calc(100% - 5px);
        transform: translateX(-100%);
    }
    
    label:active:after {
        width: 130px;
    }
    
    // centering
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 Element的Switch开关

<el-table-column prop="onlineStatus" label="是否上线" align="center" width="95" fixed="r

男娘i/ 2022年12月30日 14:00/ 0 赞/ 208 阅读

相关 Element 表格内添加 Switch 开关

实现效果 ![在这里插入图片描述][20201013162214800.png_pic_center] 主要就是使用了 slot-scope=“scope” 给开关的

我不是女神ヾ/ 2022年12月14日 12:20/ 0 赞/ 486 阅读

相关 vue+el-switch开关的使用

重点！！注意change事件的 $event 参数！！是开关变化的新状态值！ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdG

我会带着你远行/ 2022年10月14日 12:55/ 0 赞/ 388 阅读

相关纯CSS样式写switch开关

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

喜欢ヅ旅行/ 2022年06月07日 11:59/ 0 赞/ 264 阅读

相关 iview table render集成switch开关

iview table render集成switch开关今天想要分享的是iview table render集成switch开关修改table表格的值，看文档

曾经终败给现在/ 2022年06月02日 03:50/ 0 赞/ 416 阅读

相关 layui中的switch开关

效果如下图： ![70][] 显然这个插件是一个checkbox，只是在layui中封装了。所以layui的js和css是必不可少的。 Html代码： <

我不是女神ヾ/ 2022年05月21日 10:26/ 0 赞/ 325 阅读

相关 CSS3 Switch

![在这里插入图片描述][20181031102645577.gif] 除了下面这种方案实现switch，还可以使用 before + after 配合上 opacity 透

以你之姓@/ 2022年05月16日 14:30/ 0 赞/ 168 阅读

相关 css3 switch开关的实现

<input type="checkbox" id="switch" /><label for="switch">Toggle</label> inp

逃离我推掉我的手/ 2022年05月14日 04:53/ 0 赞/ 227 阅读

相关 Form-switch开关

<e

╰+哭是因爲堅強的太久メ/ 2022年03月30日 08:18/ 0 赞/ 320 阅读

相关 CSS做个Switch开关

Switch开关：　　![1041634-20170228144156001-1353181817.png][] 　　![1041634-2017022814420239

妖狐艹你老母/ 2021年09月15日 15:10/ 0 赞/ 363 阅读