HTML&CSS：惊！3D 折叠按钮

这段代码创建了一个具有 3D 效果和动画的按钮，按钮上有 SVG 图标和文本。按钮在鼠标悬停时会显示一个漂浮点动画，图标会消失并显示一个线条动画。这种效果适用于吸引用户注意并提供视觉反馈。按钮的折叠效果和背景渐变增加了页面的美观性。

演示效果

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 {
            margin: 0;
            padding: 0;
            background: #212121;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .button {
            --h-button: 48px;
            --w-button: 102px;
            --round: 0.75rem;
            cursor: pointer;
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            transition: all 0.25s ease;
            background: radial-gradient(65.28% 65.28% at 50% 100%,
                    rgba(223, 113, 255, 0.8) 0%,
                    rgba(223, 113, 255, 0) 100%),
                linear-gradient(0deg, #7a5af8, #7a5af8);
            border-radius: var(--round);
            border: none;
            outline: none;
            padding: 12px 18px;
        }

        .button::before,
        .button::after {
            content: "";
            position: absolute;
            inset: var(--space);
            transition: all 0.5s ease-in-out;
            border-radius: calc(var(--round) - var(--space));
            z-index: 0;
        }

        .button::before {
            --space: 1px;
            background: linear-gradient(177.95deg,
                    rgba(255, 255, 255, 0.19) 0%,
                    rgba(255, 255, 255, 0) 100%);
        }

        .button::after {
            --space: 2px;
            background: radial-gradient(65.28% 65.28% at 50% 100%,
                    rgba(223, 113, 255, 0.8) 0%,
                    rgba(223, 113, 255, 0) 100%),
                linear-gradient(0deg, #7a5af8, #7a5af8);
        }

        .button:active {
            transform: scale(0.95);
        }

        .fold {
            z-index: 1;
            position: absolute;
            top: 0;
            right: 0;
            height: 1rem;
            width: 1rem;
            display: inline-block;
            transition: all 0.5s ease-in-out;
            background: radial-gradient(100% 75% at 55%,
                    rgba(223, 113, 255, 0.8) 0%,
                    rgba(223, 113, 255, 0) 100%);
            box-shadow: 0 0 3px black;
            border-bottom-left-radius: 0.5rem;
            border-top-right-radius: var(--round);
        }

        .fold::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 150%;
            height: 150%;
            transform: rotate(45deg) translateX(0%) translateY(-18px);
            background-color: #e8e8e8;
            pointer-events: none;
        }

        .button:hover .fold {
            margin-top: -1rem;
            margin-right: -1rem;
        }

        .points_wrapper {
            overflow: hidden;
            width: 100%;
            height: 100%;
            pointer-events: none;
            position: absolute;
            z-index: 1;
        }

        .points_wrapper .point {
            bottom: -10px;
            position: absolute;
            animation: floating-points infinite ease-in-out;
            pointer-events: none;
            width: 2px;
            height: 2px;
            background-color: #fff;
            border-radius: 9999px;
        }

        @keyframes floating-points {
            0% {
                transform: translateY(0);
            }

            85% {
                opacity: 0;
            }

            100% {
                transform: translateY(-55px);
                opacity: 0;
            }
        }

        .points_wrapper .point:nth-child(1) {
            left: 10%;
            opacity: 1;
            animation-duration: 2.35s;
            animation-delay: 0.2s;
        }

        .points_wrapper .point:nth-child(2) {
            left: 30%;
            opacity: 0.7;
            animation-duration: 2.5s;
            animation-delay: 0.5s;
        }

        .points_wrapper .point:nth-child(3) {
            left: 25%;
            opacity: 0.8;
            animation-duration: 2.2s;
            animation-delay: 0.1s;
        }

        .points_wrapper .point:nth-child(4) {
            left: 44%;
            opacity: 0.6;
            animation-duration: 2.05s;
        }

        .points_wrapper .point:nth-child(5) {
            left: 50%;
            opacity: 1;
            animation-duration: 1.9s;
        }

        .points_wrapper .point:nth-child(6) {
            left: 75%;
            opacity: 0.5;
            animation-duration: 1.5s;
            animation-delay: 1.5s;
        }

        .points_wrapper .point:nth-child(7) {
            left: 88%;
            opacity: 0.9;
            animation-duration: 2.2s;
            animation-delay: 0.2s;
        }

        .points_wrapper .point:nth-child(8) {
            left: 58%;
            opacity: 0.8;
            animation-duration: 2.25s;
            animation-delay: 0.2s;
        }

        .points_wrapper .point:nth-child(9) {
            left: 98%;
            opacity: 0.6;
            animation-duration: 2.6s;
            animation-delay: 0.1s;
        }

        .points_wrapper .point:nth-child(10) {
            left: 65%;
            opacity: 1;
            animation-duration: 2.5s;
            animation-delay: 0.2s;
        }

        .inner {
            z-index: 2;
            gap: 6px;
            position: relative;
            width: 100%;
            color: white;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 500;
            line-height: 1.5;
            transition: color 0.2s ease-in-out;
        }

        .inner svg.icon {
            width: 18px;
            height: 18px;
            transition: fill 0.1s linear;
        }

        .button:focus svg.icon {
            fill: white;
        }

        .button:hover svg.icon {
            fill: transparent;
            animation:
                dasharray 1s linear forwards,
                filled 0.1s linear forwards 0.95s;
        }

        @keyframes dasharray {
            from {
                stroke-dasharray: 0 0 0 0;
            }

            to {
                stroke-dasharray: 68 68 0 0;
            }
        }

        @keyframes filled {
            to {
                fill: white;
            }
        }
    </style>
</head>

<body>
    <button type="button" class="button">
        <span class="fold"></span>

        <div class="points_wrapper">
            <i class="point"></i>
            <i class="point"></i>
            <i class="point"></i>
            <i class="point"></i>
            <i class="point"></i>
            <i class="point"></i>
            <i class="point"></i>
            <i class="point"></i>
            <i class="point"></i>
            <i class="point"></i>
        </div>

        <span class="inner"><svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5">
                <polyline points="13.18 1.37 13.18 9.64 21.45 9.64 10.82 22.63 10.82 14.36 2.55 14.36 13.18 1.37">
                </polyline>
            </svg>点击开奖</span>
    </button>

</body>

</html>

HTML 结构

button：定义了一个按钮元素，用于触发点击事件，并应用了类名button来应用CSS样式。
fold：一个用于创建按钮折叠效果的span元素。
points_wrapper：包含多个point元素的容器，用于创建漂浮点效果。
point：多个point元素，用于创建漂浮点效果。
inner：包含按钮文本和图标的span元素。
icon：一个SVG图标，用于显示按钮内的图标。

CSS 样式

body：设置页面的外边距、内边距、背景色、显示方式、对齐方式和高度。
.button：定义了按钮的基本样式，包括光标样式、位置、显示方式、对齐方式、溢出、过渡效果、背景渐变和圆角。
.button::before, .button::after：使用伪元素为按钮添加额外的视觉效果。
.button:active：定义了按钮被按下时的样式，包括缩放效果。
.fold：定义了按钮折叠效果的样式，包括位置、尺寸、过渡效果和背景渐变。
.fold::after：使用伪元素为折叠效果添加额外的视觉效果。
.points_wrapper：定义了漂浮点容器的样式，包括溢出、尺寸、位置和指针事件。
.points_wrapper .point：定义了漂浮点的样式，包括位置、动画和背景色。
@keyframes floating-points：定义了一个关键帧动画，用于控制漂浮点的浮动效果。
.inner：定义了按钮内部文本和图标的样式，包括位置、尺寸、颜色、字体和过渡效果。
.inner svg.icon：定义了SVG图标的样式，包括尺寸和过渡效果。
.button:focus svg.icon和.button:hover svg.icon：定义了SVG图标在获得焦点和鼠标悬停时的样式，包括填充色和动画。