HTML&CSS：领导说这个开关能打99.99分

这个页面实现了一个具有宇宙风格的3D复选框切换开关，通过CSS动画和3D效果创建了一个现代化的交互界面。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码

<!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>公众号关注：前端Hardy</title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background: #212121;
        }

        .cosmic-toggle {
            position: relative;
            width: 140px;
            height: 70px;
            transform-style: preserve-3d;
            perspective: 500px;
        }

        .toggle {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, #1a1a2e, #16213e);
            border-radius: 35px;
            transition: 0.5s;
            transform-style: preserve-3d;
            box-shadow:
                0 0 20px rgba(0, 0, 0, 0.5),
                inset 0 0 15px rgba(255, 255, 255, 0.05);
            overflow: hidden;
        }

        .cosmos {
            position: absolute;
            inset: 0;
            background: radial-gradient(1px 1px at 10% 10%, #fff 100%, transparent),
                radial-gradient(1px 1px at 20% 20%, #fff 100%, transparent),
                radial-gradient(2px 2px at 30% 30%, #fff 100%, transparent),
                radial-gradient(1px 1px at 40% 40%, #fff 100%, transparent),
                radial-gradient(2px 2px at 50% 50%, #fff 100%, transparent),
                radial-gradient(1px 1px at 60% 60%, #fff 100%, transparent),
                radial-gradient(2px 2px at 70% 70%, #fff 100%, transparent),
                radial-gradient(1px 1px at 80% 80%, #fff 100%, transparent),
                radial-gradient(1px 1px at 90% 90%, #fff 100%, transparent);
            background-size: 200% 200%;
            opacity: 0.1;
            transition: 0.5s;
        }

        .toggle-orb {
            position: absolute;
            height: 62px;
            width: 62px;
            left: 4px;
            bottom: 4px;
            background: linear-gradient(145deg, #ff6b6b, #4ecdc4);
            border-radius: 50%;
            transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            transform-style: preserve-3d;
            z-index: 2;
        }

        .inner-orb {
            position: absolute;
            inset: 5px;
            border-radius: 50%;
            background: linear-gradient(145deg, #fff, #e6e6e6);
            transition: 0.5s;
            overflow: hidden;
        }

        .inner-orb::before {
            content: "";
            position: absolute;
            inset: 0;
            background: repeating-conic-gradient(from 0deg,
                    transparent 0deg,
                    rgba(0, 0, 0, 0.1) 10deg,
                    transparent 20deg);
            animation: patternRotate 10s linear infinite;
        }

        .ring {
            position: absolute;
            inset: -3px;
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transition: 0.5s;
        }

        .toggle:checked+.slider {
            background: linear-gradient(45deg, #16213e, #1a1a2e);
        }

        .toggle:checked+.slider .toggle-orb {
            transform: translateX(70px) rotate(360deg);
            background: linear-gradient(145deg, #4ecdc4, #45b7af);
        }

        .toggle:checked+.slider .inner-orb {
            background: linear-gradient(145deg, #45b7af, #3da89f);
            transform: scale(0.9);
        }

        .toggle:checked+.slider .ring {
            border-color: rgba(78, 205, 196, 0.3);
            animation: ringPulse 2s infinite;
        }

        .energy-line {
            position: absolute;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(78, 205, 196, 0.5),
                    transparent);
            transform-origin: left;
            opacity: 0;
            transition: 0.5s;
        }

        .energy-line:nth-child(1) {
            top: 20%;
            transform: rotate(15deg);
        }

        .energy-line:nth-child(2) {
            top: 50%;
            transform: rotate(0deg);
        }

        .energy-line:nth-child(3) {
            top: 80%;
            transform: rotate(-15deg);
        }

        .toggle:checked+.slider .energy-line {
            opacity: 1;
            animation: energyFlow 2s linear infinite;
        }

        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #4ecdc4;
            border-radius: 50%;
            opacity: 0;
        }

        .toggle:checked+.slider .particle {
            animation: particleBurst 1s ease-out infinite;
        }

        .particle:nth-child(1) {
            left: 20%;
            animation-delay: 0s;
        }

        .particle:nth-child(2) {
            left: 40%;
            animation-delay: 0.2s;
        }

        .particle:nth-child(3) {
            left: 60%;
            animation-delay: 0.4s;
        }

        .particle:nth-child(4) {
            left: 80%;
            animation-delay: 0.6s;
        }

        .particle:nth-child(5) {
            left: 30%;
            animation-delay: 0.8s;
        }

        .particle:nth-child(6) {
            left: 70%;
            animation-delay: 1s;
        }

        /* Анимации */
        @keyframes ringPulse {

            0%,
            100% {
                transform: scale(1);
                opacity: 0.3;
            }

            50% {
                transform: scale(1.1);
                opacity: 0.6;
            }
        }

        @keyframes patternRotate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes energyFlow {
            0% {
                transform: scaleX(0) translateX(0);
                opacity: 0;
            }

            50% {
                transform: scaleX(1) translateX(50%);
                opacity: 1;
            }

            100% {
                transform: scaleX(0) translateX(100%);
                opacity: 0;
            }
        }

        @keyframes particleBurst {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 1;
            }

            100% {
                transform: translate(calc(cos(var(--angle)) * 50px),
                        calc(sin(var(--angle)) * 50px)) scale(0);
                opacity: 0;
            }
        }

        .slider:hover .toggle-orb {
            filter: brightness(1.2);
            box-shadow:
                0 0 20px rgba(78, 205, 196, 0.5),
                0 0 40px rgba(78, 205, 196, 0.3);
        }

        .slider:hover .cosmos {
            opacity: 0.2;
            animation: cosmosPan 20s linear infinite;
        }

        @keyframes cosmosPan {
            0% {
                background-position: 0% 0%;
            }

            100% {
                background-position: 200% 200%;
            }
        }

        .toggle:active+.slider .toggle-orb {
            transform: scale(0.95);
        }

        .cosmic-toggle:hover .slider {
            transform: rotateX(10deg) rotateY(10deg);
        }

        .cosmic-toggle:hover .toggle-orb {
            transform: translateZ(10px);
        }

        .toggle:checked+.slider::after {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at var(--x) var(--y),
                    rgba(78, 205, 196, 0.2),
                    transparent 50%);
            opacity: 0;
            animation: glowFollow 2s linear infinite;
        }

        @keyframes glowFollow {

            0%,
            100% {
                opacity: 0.2;
            }

            50% {
                opacity: 0.5;
            }
        }
    </style>
</head>

<body>

    <label class="cosmic-toggle">
        <input class="toggle" type="checkbox" />
        <div class="slider">
            <div class="cosmos"></div>
            <div class="energy-line"></div>
            <div class="energy-line"></div>
            <div class="energy-line"></div>
            <div class="toggle-orb">
                <div class="inner-orb"></div>
                <div class="ring"></div>
            </div>
            <div class="particles">
                <div style="--angle: 30deg" class="particle"></div>
                <div style="--angle: 60deg" class="particle"></div>
                <div style="--angle: 90deg" class="particle"></div>
                <div style="--angle: 120deg" class="particle"></div>
                <div style="--angle: 150deg" class="particle"></div>
                <div style="--angle: 180deg" class="particle"></div>
            </div>
        </div>
    </label>

</body>

</html>

HTML 结构

cosmic-toggle：定义了一个自定义样式的复选框容器。
toggle：定义了一个复选框，使用CSS隐藏了默认样式。
slider：定义了复选框的滑块部分，包含以下子元素：
cosmos：定义了宇宙背景效果。
energy-line：定义了三条能量线，用于动画效果。
toggle-orb：定义了滑块的球体部分。
inner-orb：定义了球体的内部效果。
ring：定义了球体周围的环。
particles：定义了粒子效果。
多个particle：定义了多个粒子，每个粒子有不同的角度。

CSS 样式

.cosmic-toggle：定义了复选框容器的样式，包括宽度、高度、3D效果和透视效果。
.toggle：隐藏原始复选框。
.slider：定义了滑块的样式，包括背景颜色、圆角、过渡效果和阴影。
.cosmos：定义了宇宙背景的样式，使用多个径向渐变创建星星效果。
.toggle-orb：定义了滑块球体的样式，包括位置、大小、背景颜色和3D效果。
.inner-orb：定义了球体内部的样式，包括渐变背景和旋转动画。
.ring：定义了球体周围的环的样式，包括边框和动画效果。
.energy-line：定义了能量线的样式，包括位置、宽度、背景颜色和动画效果。
.particles：定义了粒子容器的样式。
.particle：定义了单个粒子的样式，包括位置、大小、背景颜色和动画效果。
.toggle:checked+.slider：定义了复选框选中时滑块的背景颜色变化。
.toggle:checked+.slider .toggle-orb：定义了复选框选中时球体的位置和颜色变化。
.toggle:checked+.slider .inner-orb：定义了复选框选中时球体内部的背景颜色和缩放效果。
.toggle:checked+.slider .ring：定义了复选框选中时环的边框颜色和脉冲动画。
.toggle:checked+.slider .energy-line：定义了复选框选中时能量线的动画效果。
.toggle:checked+.slider .particle：定义了复选框选中时粒子的动画效果。
@keyframes ringPulse：定义了环的脉冲动画。
@keyframes patternRotate：定义了球体内部图案的旋转动画。
@keyframes energyFlow：定义了能量线的流动动画。
@keyframes particleBurst：定义了粒子的爆发动画。
@keyframes cosmosPan：定义了宇宙背景的平移动画。
@keyframes glowFollow：定义了跟随光效的动画。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！