HTML5+CSS3小实例：日月开关按钮

糕手糕糕

于 2024-03-08 10:03:54 发布

阅读量478

点赞数 9

分类专栏： HTML5+CSS3+JS 小实例文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/Guard_56/article/details/136554088

版权

HTML5+CSS3+JS 小实例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用HTML和CSS创建一个响应式的可切换开关组件，包括标签、输入元素、滑块样式以及状态变化时的动画效果。

摘要由CSDN通过智能技术生成

示例：

HTML:

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

CSS:

    <style>
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #a3dafb;
        }

        .switch {
            /* --moon-mask: ; */
            font-size: 17px;
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #f4f4f5;
            transition: .4s;
            border-radius: 30px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 24px;
            width: 24px;
            border-radius: 20px;
            left: 5px;
            bottom: 5px;
            background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
            ;
            transition: .4s;
        }

        input:checked+.slider {
            background-color: #303136;
        }

        input:checked+.slider:before {
            transform: translateX(25.5px);
            background: #303136;
            box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -5px 0 0 #a3dafb;
        }
    </style>