HTML&CSS：这个复选框打几分？

这个页面实现了一个具有霓虹灯效果的复选框，通过CSS动画和过渡效果创建了一个现代化的交互界面。

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

演示效果

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;
        }

        .neon-checkbox {
            --primary: #00ffaa;
            --primary-dark: #00cc88;
            --primary-light: #88ffdd;
            --size: 30px;
            position: relative;
            width: var(--size);
            height: var(--size);
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .neon-checkbox input {
            display: none;
        }

        .neon-checkbox__frame {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .neon-checkbox__box {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 4px;
            border: 2px solid var(--primary-dark);
            transition: all 0.4s ease;
        }

        .neon-checkbox__check-container {
            position: absolute;
            inset: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .neon-checkbox__check {
            width: 80%;
            height: 80%;
            fill: none;
            stroke: var(--primary);
            stroke-width: 3;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 40;
            stroke-dashoffset: 40;
            transform-origin: center;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .neon-checkbox__glow {
            position: absolute;
            inset: -2px;
            border-radius: 6px;
            background: var(--primary);
            opacity: 0;
            filter: blur(8px);
            transform: scale(1.2);
            transition: all 0.4s ease;
        }

        .neon-checkbox__borders {
            position: absolute;
            inset: 0;
            border-radius: 4px;
            overflow: hidden;
        }

        .neon-checkbox__borders span {
            position: absolute;
            width: 40px;
            height: 1px;
            background: var(--primary);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .neon-checkbox__borders span:nth-child(1) {
            top: 0;
            left: -100%;
            animation: borderFlow1 2s linear infinite;
        }

        .neon-checkbox__borders span:nth-child(2) {
            top: -100%;
            right: 0;
            width: 1px;
            height: 40px;
            animation: borderFlow2 2s linear infinite;
        }

        .neon-checkbox__borders span:nth-child(3) {
            bottom: 0;
            right: -100%;
            animation: borderFlow3 2s linear infinite;
        }

        .neon-checkbox__borders span:nth-child(4) {
            bottom: -100%;
            left: 0;
            width: 1px;
            height: 40px;
            animation: borderFlow4 2s linear infinite;
        }

        .neon-checkbox__particles span {
            position: absolute;
            width: 4px;
            height: 4px;
            background: var(--primary);
            border-radius: 50%;
            opacity: 0;
            pointer-events: none;
            top: 50%;
            left: 50%;
            box-shadow: 0 0 6px var(--primary);
        }

        .neon-checkbox__rings {
            position: absolute;
            inset: -20px;
            pointer-events: none;
        }

        .neon-checkbox__rings .ring {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 1px solid var(--primary);
            opacity: 0;
            transform: scale(0);
        }

        .neon-checkbox__sparks span {
            position: absolute;
            width: 20px;
            height: 1px;
            background: linear-gradient(90deg, var(--primary), transparent);
            opacity: 0;
        }

        .neon-checkbox:hover .neon-checkbox__box {
            border-color: var(--primary);
            transform: scale(1.05);
        }

        .neon-checkbox input:checked~.neon-checkbox__frame .neon-checkbox__box {
            border-color: var(--primary);
            background: rgba(0, 255, 170, 0.1);
        }

        .neon-checkbox input:checked~.neon-checkbox__frame .neon-checkbox__check {
            stroke-dashoffset: 0;
            transform: scale(1.1);
        }

        .neon-checkbox input:checked~.neon-checkbox__frame .neon-checkbox__glow {
            opacity: 0.2;
        }

        .neon-checkbox input:checked~.neon-checkbox__frame .neon-checkbox__borders span {
            opacity: 1;
        }

        .neon-checkbox input:checked~.neon-checkbox__frame .neon-checkbox__particles span {
            animation: particleExplosion 0.6s ease-out forwards;
        }

        .neon-checkbox input:checked~.neon-checkbox__frame .neon-checkbox__rings .ring {
            animation: ringPulse 0.6s ease-out forwards;
        }

        .neon-checkbox input:checked~.neon-checkbox__frame .neon-checkbox__sparks span {
            animation: sparkFlash 0.6s ease-out forwards;
        }

        @keyframes borderFlow1 {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(200%);
            }
        }

        @keyframes borderFlow2 {
            0% {
                transform: translateY(0);
            }

            100% {
                transform: translateY(200%);
            }
        }

        @keyframes borderFlow3 {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-200%);
            }
        }

        @keyframes borderFlow4 {
            0% {
                transform: translateY(0);
            }

            100% {
                transform: translateY(-200%);
            }
        }

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

            20% {
                opacity: 1;
            }

            100% {
                transform: translate(calc(-50% + var(--x, 20px)),
                        calc(-50% + var(--y, 20px))) scale(0);
                opacity: 0;
            }
        }

        @keyframes ringPulse {
            0% {
                transform: scale(0);
                opacity: 1;
            }

            100% {
                transform: scale(2);
                opacity: 0;
            }
        }

        @keyframes sparkFlash {
            0% {
                transform: rotate(var(--r, 0deg)) translateX(0) scale(1);
                opacity: 1;
            }

            100% {
                transform: rotate(var(--r, 0deg)) translateX(30px) scale(0);
                opacity: 0;
            }
        }

        .neon-checkbox__particles span:nth-child(1) {
            --x: 25px;
            --y: -25px;
        }

        .neon-checkbox__particles span:nth-child(2) {
            --x: -25px;
            --y: -25px;
        }

        .neon-checkbox__particles span:nth-child(3) {
            --x: 25px;
            --y: 25px;
        }

        .neon-checkbox__particles span:nth-child(4) {
            --x: -25px;
            --y: 25px;
        }

        .neon-checkbox__particles span:nth-child(5) {
            --x: 35px;
            --y: 0px;
        }

        .neon-checkbox__particles span:nth-child(6) {
            --x: -35px;
            --y: 0px;
        }

        .neon-checkbox__particles span:nth-child(7) {
            --x: 0px;
            --y: 35px;
        }

        .neon-checkbox__particles span:nth-child(8) {
            --x: 0px;
            --y: -35px;
        }

        .neon-checkbox__particles span:nth-child(9) {
            --x: 20px;
            --y: -30px;
        }

        .neon-checkbox__particles span:nth-child(10) {
            --x: -20px;
            --y: 30px;
        }

        .neon-checkbox__particles span:nth-child(11) {
            --x: 30px;
            --y: 20px;
        }

        .neon-checkbox__particles span:nth-child(12) {
            --x: -30px;
            --y: -20px;
        }

        .neon-checkbox__sparks span:nth-child(1) {
            --r: 0deg;
            top: 50%;
            left: 50%;
        }

        .neon-checkbox__sparks span:nth-child(2) {
            --r: 90deg;
            top: 50%;
            left: 50%;
        }

        .neon-checkbox__sparks span:nth-child(3) {
            --r: 180deg;
            top: 50%;
            left: 50%;
        }

        .neon-checkbox__sparks span:nth-child(4) {
            --r: 270deg;
            top: 50%;
            left: 50%;
        }

        .neon-checkbox__rings .ring:nth-child(1) {
            animation-delay: 0s;
        }

        .neon-checkbox__rings .ring:nth-child(2) {
            animation-delay: 0.1s;
        }

        .neon-checkbox__rings .ring:nth-child(3) {
            animation-delay: 0.2s;
        }
    </style>
</head>

<body>
    <label class="neon-checkbox">
        <input type="checkbox" />
        <div class="neon-checkbox__frame">
            <div class="neon-checkbox__box">
                <div class="neon-checkbox__check-container">
                    <svg viewBox="0 0 24 24" class="neon-checkbox__check">
                        <path d="M3,12.5l7,7L21,5"></path>
                    </svg>
                </div>
                <div class="neon-checkbox__glow"></div>
                <div class="neon-checkbox__borders">
                    <span></span><span></span><span></span><span></span>
                </div>
            </div>
            <div class="neon-checkbox__effects">
                <div class="neon-checkbox__particles">
                    <span></span><span></span><span></span><span></span>
                    <span></span><span></span><span></span><span></span>
                    <span></span><span></span><span></span><span></span>
                </div>
                <div class="neon-checkbox__rings">
                    <div class="ring"></div>
                    <div class="ring"></div>
                    <div class="ring"></div>
                </div>
                <div class="neon-checkbox__sparks">
                    <span></span><span></span><span></span><span></span>
                </div>
            </div>
        </div>
    </label>


</body>

</html>

HTML 结构

neon-checkbox：定义了一个自定义样式的复选框容器。
checkbox：定义了一个复选框，使用CSS隐藏了默认样式。
neon-checkbox__frame：定义了复选框的框架部分，包含以下子元素：
neon-checkbox__box：定义了复选框的框体部分。
neon-checkbox__check-container：定义了复选框的对勾容器。
neon-checkbox__check：定义了对勾的SVG图形。
neon-checkbox__glow：定义了发光效果。
neon-checkbox__borders：定义了边框效果。
四个span：定义了边框的四个边。
neon-checkbox__effects：定义了复选框的特效部分。
neon-checkbox__particles：定义了粒子效果。
十二个span：定义了多个粒子。
neon-checkbox__rings：定义了环形效果。
三个ring：定义了三个环。
neon-checkbox__sparks：定义了火花效果。
四个span：定义了四个火花。

CSS 样式

.neon-checkbox：定义了复选框容器的样式，包括宽度、高度、光标和点击效果。
.neon-checkbox input：隐藏原始复选框。
.neon-checkbox__frame：定义了复选框框架的样式，包括位置和尺寸。
.neon-checkbox__box：定义了复选框框体的样式，包括背景颜色、边框、圆角和过渡效果。
.neon-checkbox__check-container：定义了对勾容器的样式，包括位置和对齐方式。
.neon-checkbox__check：定义了对勾的SVG图形的样式，包括填充颜色、描边颜色、描边宽度和动画效果。
.neon-checkbox__glow：定义了发光效果的样式，包括位置、背景颜色、透明度和模糊效果。
.neon-checkbox__borders：定义了边框效果的样式，包括位置和溢出效果。
.neon-checkbox__borders span：定义了边框的四个边的样式，包括位置、宽度、高度和动画效果。
.neon-checkbox__particles：定义了粒子容器的样式。
.neon-checkbox__particles span：定义了单个粒子的样式，包括位置、大小、背景颜色、圆角、透明度和动画效果。
.neon-checkbox__rings：定义了环形效果的样式，包括位置和溢出效果。
.neon-checkbox__rings .ring：定义了单个环的样式，包括位置、圆角、边框和动画效果。
.neon-checkbox__sparks：定义了火花效果的样式。
.neon-checkbox__sparks span：定义了单个火花的样式，包括位置、宽度、高度、背景颜色和动画效果。
.neon-checkbox:hover .neon-checkbox__box：定义了复选框悬停时的样式，包括边框颜色变化和缩放效果。
.neon-checkbox input:checked~.neon-checkbox__frame .neon-checkbox__box：定义了复选框选中时框体的样式，包括背景颜色变化。
.neon-checkbox input:checked~.neon-checkbox__frame .neon-checkbox__check：定义了复选框选中时对勾的样式，包括描边偏移和缩放效果。
.neon-checkbox input:checked~.neon-checkbox__frame .neon-checkbox__glow：定义了复选框选中时发光效果的样式，包括透明度变化。
.neon-checkbox input:checked~.neon-checkbox__frame .neon-checkbox__borders span：定义了复选框选中时边框的样式，包括透明度变化。
.neon-checkbox input:checked~.neon-checkbox__frame .neon-checkbox__particles span：定义了复选框选中时粒子的动画效果。
.neon-checkbox input:checked~.neon-checkbox__frame .neon-checkbox__rings .ring：定义了复选框选中时环形效果的动画效果。
.neon-checkbox input:checked~.neon-checkbox__frame .neon-checkbox__sparks span：定义了复选框选中时火花效果的动画效果。
@keyframes borderFlow1：定义了边框流动动画，用于边框的水平流动效果。
@keyframes borderFlow2：定义了边框流动动画，用于边框的垂直流动效果。
@keyframes borderFlow3：定义了边框流动动画，用于边框的水平反向流动效果。
@keyframes borderFlow4：定义了边框流动动画，用于边框的垂直反向流动效果。
@keyframes particleExplosion：定义了粒子爆炸动画，用于粒子的散开效果。
@keyframes ringPulse：定义了环形脉冲动画，用于环的缩放效果。
@keyframes sparkFlash：定义了火花闪烁动画，用于火花的移动和消失效果。

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