HTML&CSS：手把手教你实现设备开关效果这段代码创建了一个超级酷炫逼真的物理开关控件，用户可以通过点击开关来切换状态

这段代码创建了一个超级酷炫逼真的物理开关控件，用户可以通过点击开关来切换状态。当复选框被选中时，开关的样式会发生变化，包括背景色、边框和 SVG 图标的颜色。这种效果适用于创建美观的交互式开关，例如在设置页面中控制某些设备的开启或关闭。点击获取更多

演示效果

HTML&CSS

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #212121;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        #checkbox {
            display: none;
        }

        .switch {
            position: relative;
            width: 70px;
            height: 70px;
            background-color: rgb(99, 99, 99);
            border-radius: 50%;
            z-index: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid rgb(126, 126, 126);
            box-shadow: 0px 0px 3px rgb(2, 2, 2) inset;
        }

        .switch svg {
            width: 1.2em;
        }

        .switch svg path {
            fill: rgb(48, 48, 48);
        }

        #checkbox:checked+.switch {
            box-shadow: 0px 0px 1px rgb(151, 243, 255) inset,
                0px 0px 2px rgb(151, 243, 255) inset, 0px 0px 10px rgb(151, 243, 255) inset,
                0px 0px 40px rgb(151, 243, 255), 0px 0px 100px rgb(151, 243, 255),
                0px 0px 5px rgb(151, 243, 255);
            border: 2px solid rgb(255, 255, 255);
            background-color: rgb(146, 180, 184);
        }

        #checkbox:checked+.switch svg {
            filter: drop-shadow(0px 0px 5px rgb(151, 243, 255));
        }

        #checkbox:checked+.switch svg path {
            fill: rgb(255, 255, 255);
        }
    </style>
</head>

<body>
    <input id="checkbox" type="checkbox" />
    <label class="switch" for="checkbox">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="slider">
            <path
                d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V256c0 17.7 14.3 32 32 32s32-14.3 32-32V32zM143.5 120.6c13.6-11.3 15.4-31.5 4.1-45.1s-31.5-15.4-45.1-4.1C49.7 115.4 16 181.8 16 256c0 132.5 107.5 240 240 240s240-107.5 240-240c0-74.2-33.8-140.6-86.6-184.6c-13.6-11.3-33.8-9.4-45.1 4.1s-9.4 33.8 4.1 45.1c38.9 32.3 63.5 81 63.5 135.4c0 97.2-78.8 176-176 176s-176-78.8-176-176c0-54.4 24.7-103.1 63.5-135.4z">
            </path>
        </svg>
    </label>


</body>

</html>

HTML 结构

：定义了一个复选框元素，用于控制开关的状态，并且它有一个 ID 为“checkbox”。

switch checkbox：定义了一个标签元素，用于改善可访问性，它与复选框相关联，并且有一个类名“switch”。
svg：一个 SVG 元素，用于显示开关的图标，它位于标签内部，因此点击图标也能切换复选框的状态。

CSS 样式

body：设置页面的外边距、内边距、背景色、显示方式、对齐方式和高度。
#checkbox：定义了复选框的样式，使其不可见（display: none;）。
.switch：定义了开关的基本样式，包括位置、尺寸、背景色、圆角、层级、光标样式、显示方式、对齐方式、边框和阴影。
.switch svg：定义了 SVG 元素的尺寸。
.switch svg path：定义了 SVG 路径的填充色。
#checkbox:checked+.switch：当复选框被选中时，改变开关的阴影、边框和背景色。
#checkbox:checked+.switch svg：当复选框被选中时，为 SVG 元素添加滤镜效果。
#checkbox:checked+.switch svg path：当复选框被选中时，改变 SVG 路径的填充色。