HTML&CSS ：高颜值星空按钮

玄之 · 发表于 2025-3-4 17:10:08

这段代码通过纯CSS实现了一个具有星空背景、闪烁星星和流星动画的高颜值按钮。按钮在鼠标悬停和点击时具有动态交互效果，整体设计美观且富有动感，适合用于创意页面或特殊主题的按钮设计。

演示效果

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 {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #e8e8e8;
            overflow: hidden;
        }

        button#space-btn {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            border: 0;
            outline: 0;
            border-radius: 11px;
            background: #03001e;
            background: linear-gradient(80deg, #ffcbf2, #ec38bc, #7303c0, #03001e);
            cursor: pointer;
        }

        .btncontainer {
            width: 200px;
            height: 60px;
            position: relative;
            overflow: visible;
        }

        .btncontainer::after {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 20px;
            z-index: -1;
            background: #03001e;
            background: linear-gradient(80deg, #ffcbf2, #ec38bc, #7303c0, #03001e);
            filter: blur(20px);
            opacity: 0;
        }

        .btncontainer:hover {
            transform: scale(1.1);
            transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
        }

        .btncontainer:hover:after {
            transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
            opacity: 1;
        }

        .btncontainer:active {
            transform: scale(1);
        }

        .btncontainer:active:after {
            opacity: 0;
        }

        button span {
            color: white;
            font-weight: 700;
            font-size: 16px;
        }

        button#space-btn div.star {
            width: 1px;
            height: 1px;
            background-color: white;
            border-radius: 50%;
            animation: blink 2s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
        }

        button#space-btn div.shooting-star {
            width: 80px;
            height: 1px;
            position: absolute;
            background: linear-gradient(80deg, #ffffffff, #ffffff00);
            border-radius: 50%;
            transform: rotate(-40deg);
            opacity: 0;
        }

        button#space-btn div.shooting-star-1 {
            animation: fallingStar1 4s 6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
        }

        button#space-btn div.shooting-star-2 {
            animation: fallingStar2 2s 10s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
        }

        button#space-btn div.shooting-star-3 {
            animation: fallingStar3 8s 20s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
        }

        button#space-btn div.shooting-star-4 {
            animation: fallingStar4 4s 6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
        }

        @keyframes blink {
            0% {
                box-shadow: 0 0 10px 0 white;
            }

            50% {
                box-shadow: 0 0 10px 2px white;
            }

            100% {
                box-shadow: 0 0 10px 0 white;
            }
        }

        @keyframes fallingStar1 {
            0% {
                top: -10px;
                left: 220px;
                opacity: 1;
            }

            100% {
                top: 200px;
                left: -20px;
                opacity: 1;
            }
        }

        @keyframes fallingStar2 {
            0% {
                top: -10px;
                left: 150px;
                opacity: 1;
            }

            100% {
                top: 200px;
                left: -90px;
                opacity: 1;
            }
        }

        @keyframes fallingStar3 {
            0% {
                top: -10px;
                left: 80px;
                opacity: 1;
            }

            100% {
                top: 200px;
                left: -160px;
                opacity: 1;
            }
        }

        @keyframes fallingStar4 {
            0% {
                top: -10px;
                left: 0px;
                opacity: 1;
            }

            100% {
                top: 200px;
                left: -240px;
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <div class="btncontainer">
        <button id="space-btn" name="space-button" type="submit">
            <span>高颜值星空按钮</span>
            <div style="position: absolute; left: 119.273px; top: 18.0747px; animation-delay: 3.37051s; transform: scale(0.196521);"
                class="star"></div>
            <div style="position: absolute; left: 166.774px; top: 47.4519px; animation-delay: 3.03913s; transform: scale(0.33078);"
                class="star"></div>
            <div style="position: absolute; left: 238.677px; top: 19.6434px; animation-delay: 3.85796s; transform: scale(1.29037);"
                class="star"></div>
            <div style="position: absolute; left: 22.2022px; top: 4.69534px; animation-delay: 4.9415s; transform: scale(1.82231);"
                class="star"></div>
            <div style="position: absolute; left: 206.74px; top: 40.7685px; animation-delay: 1.59195s; transform: scale(1.01375);"
                class="star"></div>
            <div style="position: absolute; left: 241.531px; top: 14.2516px; animation-delay: 1.67616s; transform: scale(0.811597);"
                class="star"></div>
            <div style="position: absolute; left: 14.754px; top: 25.2924px; animation-delay: 0.0348248s; transform: scale(0.102529);"
                class="star"></div>
            <div style="position: absolute; left: 220.444px; top: 43.9803px; animation-delay: 1.5106s; transform: scale(0.16088);"
                class="star"></div>
            <div style="position: absolute; left: 95.948px; top: 54.8942px; animation-delay: 3.18662s; transform: scale(1.7822);"
                class="star"></div>
            <div style="position: absolute; left: 30.3484px; top: 36.5984px; animation-delay: 4.30868s; transform: scale(1.16326);"
                class="star"></div>
            <div style="position: absolute; left: 184.622px; top: 20.0923px; animation-delay: 2.83829s; transform: scale(1.27781);"
                class="star"></div>
            <div style="position: absolute; left: 142.1px; top: 22.3542px; animation-delay: 2.73988s; transform: scale(1.62715);"
                class="star"></div>
            <div style="position: absolute; left: 145.079px; top: 6.97553px; animation-delay: 0.0408754s; transform: scale(0.468075);"
                class="star"></div>
            <div style="position: absolute; left: 6.67886px; top: 38.4849px; animation-delay: 3.84019s; transform: scale(0.272217);"
                class="star"></div>
            <div style="position: absolute; left: 201.17px; top: 39.9168px; animation-delay: 2.93587s; transform: scale(0.521258);"
                class="star"></div>
            <div style="position: absolute; left: 224.215px; top: 42.9903px; animation-delay: 0.895495s; transform: scale(0.0458902);"
                class="star"></div>
            <div style="position: absolute; left: 42.2308px; top: 9.78383px; animation-delay: 4.58407s; transform: scale(0.0422065);"
                class="star"></div>
            <div style="position: absolute; left: 91.2734px; top: 14.0408px; animation-delay: 2.05927s; transform: scale(0.11997);"
                class="star"></div>
            <div style="position: absolute; left: 35.6985px; top: 52.6403px; animation-delay: 3.07343s; transform: scale(0.672992);"
                class="star"></div>
            <div style="position: absolute; left: 76.4191px; top: 48.453px; animation-delay: 2.35679s; transform: scale(1.46957);"
                class="star"></div>
            <div style="position: absolute; left: 184.503px; top: 4.18267px; animation-delay: 1.43409s; transform: scale(0.606616);"
                class="star"></div>
            <div style="position: absolute; left: 221.039px; top: 54.2493px; animation-delay: 2.92356s; transform: scale(0.638665);"
                class="star"></div>
            <div style="position: absolute; left: 185.612px; top: 44.3px; animation-delay: 1.36401s; transform: scale(1.65012);"
                class="star"></div>
            <div style="position: absolute; left: 154.027px; top: 45.9848px; animation-delay: 3.723s; transform: scale(1.4118);"
                class="star"></div>
            <div style="position: absolute; left: 220.591px; top: 4.95194px; animation-delay: 0.363098s; transform: scale(0.52369);"
                class="star"></div>
            <div style="position: absolute; left: 236.028px; top: 11.1663px; animation-delay: 3.67493s; transform: scale(0.956478);"
                class="star"></div>
            <div style="position: absolute; left: 110.241px; top: 20.2684px; animation-delay: 2.94906s; transform: scale(1.2193);"
                class="star"></div>
            <div style="position: absolute; left: 12.602px; top: 19.8836px; animation-delay: 4.072s; transform: scale(1.49026);"
                class="star"></div>
            <div style="position: absolute; left: 30.0911px; top: 37.9746px; animation-delay: 1.02002s; transform: scale(1.41008);"
                class="star"></div>
            <div style="position: absolute; left: 62.3096px; top: 9.64604px; animation-delay: 3.9445s; transform: scale(0.231214);"
                class="star"></div>
            <div style="position: absolute; left: 44.7189px; top: 32.4307px; animation-delay: 4.78921s; transform: scale(0.359408);"
                class="star"></div>
            <div style="position: absolute; left: 191.866px; top: 27.151px; animation-delay: 1.34451s; transform: scale(1.13484);"
                class="star"></div>
            <div style="position: absolute; left: 47.6744px; top: 3.00604px; animation-delay: 1.04567s; transform: scale(0.682023);"
                class="star"></div>
            <div style="position: absolute; left: 98.6225px; top: 49.6115px; animation-delay: 2.41384s; transform: scale(1.96254);"
                class="star"></div>
            <div style="position: absolute; left: 57.4785px; top: 29.6588px; animation-delay: 3.3569s; transform: scale(1.53118);"
                class="star"></div>
            <div style="position: absolute; left: 13.2213px; top: 24.538px; animation-delay: 1.69582s; transform: scale(1.6236);"
                class="star"></div>
            <div style="position: absolute; left: 131.656px; top: 31.1837px; animation-delay: 1.29918s; transform: scale(1.84486);"
                class="star"></div>
            <div style="position: absolute; left: 56.9067px; top: 51.9904px; animation-delay: 4.74375s; transform: scale(0.749788);"
                class="star"></div>
            <div style="position: absolute; left: 82.8361px; top: 54.3876px; animation-delay: 1.28648s; transform: scale(0.566118);"
                class="star"></div>
            <div style="position: absolute; left: 193.213px; top: 43.9428px; animation-delay: 0.390178s; transform: scale(1.411);"
                class="star"></div>
            <div style="animation-delay: 1.2122s;" class="shooting-star shooting-star-1"></div>
            <div style="animation-delay: 0.777895s;" class="shooting-star shooting-star-2"></div>
            <div style="animation-delay: 4.90483s;" class="shooting-star shooting-star-3"></div>
            <div style="animation-delay: 3.66012s;" class="shooting-star shooting-star-4"></div>
        </button>
    </div>
</body>
</html>

HTML 结构

btncontainer：按钮的容器，用于包裹按钮并实现一些视觉效果。
space-btn：定义一个按钮，包含文字内容和多个SVG元素（星星和流星）。
span：按钮中的文字内容。
star：定义按钮上的星星动画。
shooting-star：定义按钮上的流星动画。

CSS 样式

body：设置页面背景颜色、布局方式（居中对齐）和全屏高度。
.btncontainer：定义按钮容器的样式，包括宽高、位置和过渡动画。
.btncontainer::after：为按钮容器添加一个模糊的背景，增强视觉效果。
.btncontainer:hover：鼠标悬停时，按钮放大并触发过渡动画。
.btncontainer:hover:after：鼠标悬停时，模糊背景的透明度增加。
.btncontainer:active：按钮点击时，按钮恢复原大小。
.btncontainer:active:after：按钮点击时，模糊背景的透明度恢复。
button#space-btn：定义按钮的样式，包括背景渐变、圆角和无边框。
button span：定义按钮文字的样式，包括颜色、字体大小和加粗。
.star：定义星星的样式，包括大小、背景颜色、圆角和闪烁动画。
.shooting-star：定义流星的样式，包括大小、背景渐变、圆角和移动动画。
@keyframes blink：定义星星的闪烁动画。
@keyframes fallingStar1、@keyframes fallingStar2、@keyframes fallingStar3、@keyframes fallingStar4：分别定义流星的移动动画。