Switch Button 滑动按钮纯HTML+CSS制作

最新推荐文章于 2024-02-04 09:00:00 发布

牧羊人_sj

最新推荐文章于 2024-02-04 09:00:00 发布

阅读量1.3k

点赞数 5

分类专栏： css 文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_59347596/article/details/126356500

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

利用伪元素 ::before ::after 直接复制可自行查看效果，

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Switch Button</title>
</head>

<body>
    <div>
        <h2>Switch Button</h2>
        <input class="switch-box" type="checkbox">

    </div>
</body>
<style>
    .switch-box {
        width: 100px;
        height: 60px;
        background-color: rgb(230, 230, 230);
        position: relative;
        cursor: pointer;
        /* 外观 */
        appearance: none;
        border-radius: 30px;
        transition: all 500ms;
    }

    .switch-box ::before {
        width: 100px;
        height: 60px;
        background-color: rgb(230, 230, 230);
        position: absolute;
        cursor: pointer;
        content: '';
        border-radius: 30px;
        transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    .switch-box::after {
        position: absolute;
        left: 4px;
        top: 4px;
        width: 52px;
        height: 52px;
        border-radius: 26px;
        background-color: #fff;
        box-shadow: 1px 1px 5px rgba(#000, .3);
        content: '';
        transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1);

    }

    .switch-box:checked {
        background-color: darkcyan;
    }

    .switch-box:checked::after {
        transform: translateX(40px);

    }

    .switch-box:checked::before {
        transform: scale(0);

    }
</style>

</html>

大家有更好的建议请留言多多指教