HTML&CSS：酷炫的3D开关控件

这段代码创建了一个具有 3D 效果的开关控件，当用户点击滑块时，滑块会移动到开关的另一侧，同时改变背景颜色，模拟开关的开启和关闭状态。动画效果增加了页面的互动性和视觉吸引力。

演示效果

HTML&CSS

html 复制代码

<!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 {
            background-color: #212121;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100vh;
        }

        .switch {
            font-size: 17px;
            position: relative;
            display: inline-block;
            width: 3.5em;
            height: 2em;
            transform-style: preserve-3d;
            perspective: 500px;
            animation: toggle__animation 3s infinite;
        }

        .switch::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            filter: blur(20px);
            z-index: -1;
            border-radius: 50px;
            background-color: #d8ff99;
            background-image: radial-gradient(at 21% 46%, hsla(183, 65%, 60%, 1) 0px, transparent 50%),
                radial-gradient(at 23% 25%, hsla(359, 74%, 70%, 1) 0px, transparent 50%),
                radial-gradient(at 20% 1%, hsla(267, 83%, 75%, 1) 0px, transparent 50%),
                radial-gradient(at 86% 87%, hsla(204, 69%, 68%, 1) 0px, transparent 50%),
                radial-gradient(at 99% 41%, hsla(171, 72%, 77%, 1) 0px, transparent 50%),
                radial-gradient(at 55% 24%, hsla(138, 60%, 62%, 1) 0px, transparent 50%);
        }

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

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

        .slider:before {
            position: absolute;
            content: "";
            height: 1.4em;
            width: 1.4em;
            left: 0.3em;
            bottom: 0.35em;
            transition: .4s;
            border-radius: 50%;
            box-shadow: rgba(0, 0, 0, 0.17) 0px -10px 10px 0px inset,
                rgba(0, 0, 0, 0.09) 0px -1px 15px -8px;
            background-color: #ff99fd;
            background-image: radial-gradient(at 81% 39%, hsla(327, 79%, 79%, 1) 0px, transparent 50%),
                radial-gradient(at 11% 72%, hsla(264, 64%, 79%, 1) 0px, transparent 50%),
                radial-gradient(at 23% 20%, hsla(75, 98%, 71%, 1) 0px, transparent 50%);
        }

        .input__check:checked+.slider {
            background-color: #17202A;
        }

        .input__check:checked+.slider:before {
            transform: translateX(1.5em);
        }

        @keyframes toggle__animation {

            0%,
            100% {
                transform: translateY(-10px) rotateX(15deg) rotateY(-20deg);
            }

            50% {
                transform: translateY(0px) rotateX(15deg) rotateY(-20deg);
            }
        }
    </style>
</head>

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

</body>

</html>

HTML 结构

switch：定义了一个包含开关控件的标签元素，这个标签被赋予了一个类名 switch，用于应用 CSS 样式。
inputcheck：一个复选框输入元素，用于控制开关的状态。它被赋予了一个类名 inputcheck。
slider：一个 span 元素，用于作为开关的滑块（slider），它被赋予了一个类名 slider。

CSS 样式

.switch：定义了开关的基本样式，包括字体大小、位置、尺寸、3D 转换样式和动画。
.switch::before：使用伪元素为开关创建一个模糊的背景，增加了视觉效果。
.switch input：将复选框的透明度设置为 0，使其不可见，因为它的功能由开关的滑块控制。
.slider：定义了滑块的位置、光标样式、尺寸、背景颜色、过渡效果和圆角。
.slider:before：使用伪元素为滑块创建一个圆形的前置图形，用于显示滑块的位置。
.input__check:checked+.slider：当复选框被选中时，改变滑块的背景颜色。
.input__check:checked+.slider:before：当复选框被选中时，改变滑块前置图形的位置，使其移动到开关的另一侧。
@keyframes toggle__animation：定义了一个关键帧动画，用于在页面加载时给开关添加一个动态的 3D 效果。