HTML&CSS：看这里，动态背景卡片效果

前端Hardy

于 2025-04-22 12:47:36 发布

阅读量658

点赞数 20

分类专栏： CSS 文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_52814911/article/details/147414721

版权

CSS 专栏收录该内容

181 篇文章

订阅专栏

这个页面实现了一个具有动态背景效果的卡片布局，每个卡片都有独特的背景颜色和光效。页面使用了 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 {
            margin: 0;
            padding: 0;
            background: #212121;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        @property --gh {
            syntax: "<percentage>";
            initial-value: 0%;
            inherits: false;
        }

        :root {
            --brad: 0.4rem;
        }

        body {
            background-color: #0e0e0e;
            color: #fff;
            font-family: monospace;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            place-items: center;
            gap: 1rem;
            height: 100vh;
            margin: 0;
        }

        .card {
            position: relative;
            width: 200px;
            padding: 1rem 2rem;
            border-radius: var(--brad);
            background: color-mix(var(--bg), #fff);
            overflow: hidden;

            .card__backdrop {
                --grad: hsl(from var(--bg) h 20 50);
                position: absolute;
                inset: 0;
                background-image: radial-gradient(150% var(--gh) at 25% 100%,
                        var(--grad),
                        transparent),
                    radial-gradient(150% calc(300% - var(--gh) + 25%) at 75% 100%,
                        var(--grad),
                        transparent);
                animation: wobble 3s infinite alternate;
                transition: --gy 1s ease;

                &::before {
                    content: "";
                    position: absolute;
                    inset: 0.1rem;
                    background: rgba(0 0 0 / 0.2);
                    border-radius: var(--brad);
                    backdrop-filter: blur(100px) contrast(10);
                }

                &::after {
                    --p: 0.12rem;
                    --p2x: calc(var(--p) * 2);
                    content: "";
                    position: absolute;
                    inset: 0.15em;
                    background-image: radial-gradient(circle at center, #000 50%, #fff 1px);
                    background-size: var(--p2x) var(--p2x);
                    border-radius: var(--brad);
                    mix-blend-mode: color-burn;
                }
            }

            .card__content {
                position: relative;
                text-wrap: balance;
            }
        }

        @keyframes wobble {
            from {
                --gh: 25%;
            }

            to {
                --gh: 300%;
            }
        }
    </style>
</head>

<body>
    <div class="card" style="--bg: #8e24aa">
        <div class="card__backdrop"></div>
        <div class="card__content">
            <h1>Let it Glow</h1>
            <p>With a little bit of CSS light.</p>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto esse eligendi culpa eaque harum
                ratione, voluptatibus enim quasi iure, sint impedit iusto nemo in mollitia possimus dolor? Tenetur,
                exercitationem rem.</p>
        </div>
    </div>

    <div class="card" style="--bg: #E53935">
        <div class="card__backdrop"></div>
        <div class="card__content">
            <h1>Let it Glow</h1>
            <p>With a little bit of CSS light.</p>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto esse eligendi culpa eaque harum
                ratione, voluptatibus enim quasi iure, sint impedit iusto nemo in mollitia possimus dolor? Tenetur,
                exercitationem rem.</p>
        </div>
    </div>
</body>

</html>