CSS其他

23,810次阅读

共计 2380 个字符，预计需要花费 6 分钟才能阅读完成。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    label {
        display: block;
        vertical-align: middle;
    }

    label,
    input,
    select {vertical-align: middle;}

    .mui-switch {
        width: 52px;
        height: 31px;
        position: relative;
        border: 1px solid #dfdfdf;
        background-color: #fdfdfd;
        box-shadow: #dfdfdf 0 0 0 0 inset;
        border-radius: 20px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        background-clip: content-box;
        display: inline-block;
        -webkit-appearance: none;
        user-select: none;
        outline: none;
    }

    .mui-switch:before {
        content: '';
        width: 29px;
        height: 29px;
        position: absolute;
        top: 0px;
        left: 0;
        border-radius: 20px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }

    .mui-switch:checked {
        border-color: #64bd63;
        box-shadow: #64bd63 0 0 0 16px inset;
        background-color: #64bd63;
    }

    .mui-switch:checked:before {left: 21px;}

    .mui-switch.mui-switch-animbg {transition: background-color ease 0.4s;}

    .mui-switch.mui-switch-animbg:before {transition: left 0.3s;}

    .mui-switch.mui-switch-animbg:checked {
        box-shadow: #dfdfdf 0 0 0 0 inset;
        background-color: #64bd63;
        transition: border-color 0.4s, background-color ease 0.4s;
    }

    .mui-switch.mui-switch-animbg:checked:before {transition: left 0.3s;}

    .mui-switch.mui-switch-anim {transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
    }

    .mui-switch.mui-switch-anim:before {transition: left 0.3s;}

    .mui-switch.mui-switch-anim:checked {
        box-shadow: #64bd63 0 0 0 16px inset;
        background-color: #64bd63;
        transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
    }

    .mui-switch.mui-switch-anim:checked:before {transition: left 0.3s;}

    /*# sourceMappingURL=mui-switch.css.map */
</style>

<body>
    <label>
        <input class="mui-switch" type="checkbox"> 默认未选中 </label>
    <label>
        <input class="mui-switch" type="checkbox" checked> 默认选中 </label>
    <label>
        <input class="mui-switch mui-switch-animbg" type="checkbox"> 默认未选中, 简单的背景过渡效果, 加 mui-switch-animbg 类即可 </label>
    <label>
        <input class="mui-switch mui-switch-animbg" type="checkbox" checked> 默认选中 </label>
    <label>
        <input class="mui-switch mui-switch-anim" type="checkbox"> 默认未选中，过渡效果，加 mui-switch-anim 类即可
    </label>
    <label>
        <input class="mui-switch mui-switch-anim" type="checkbox" checked> 默认选中 </label>
</body>

</html>

正文完

发表至：开发笔记

2024-09-10

0

转载说明：

1 本网站名称：优杰开发笔记
2 本站永久网址：https://yojack.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站所有内容均可转载及分享, 但请注明出处
6 我们始终尊重原创作者的版权，所有文章在发布时，均尽可能注明出处与作者。
7 站长邮箱：laylwenl@gmail.com

Vue | 使用 ECharts 绘制折线图

原生Img图片标签图片自适应缩放且不变形

HTML快速入门

如何写一份接近完美的 Android 开发者简历

Sass入门