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

这个页面实现了一个具有动态背景效果的卡片布局，每个卡片都有独特的背景颜色和光效。页面使用了 CSS 自定义属性和动画来增强视觉效果，整体设计风格现代且具有视觉吸引力。

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

演示效果

HTML&CSS


html
 代码解读
复制代码

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardytitle>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #212121;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        @property --gh {
            syntax: "";
            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 Glowh1>
            <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 Glowh1>
            <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>

HTML 结构

两个 card 元素，每个都代表一个卡片。
card__backdrop：定义卡片的背景效果。
card__content：包含卡片的内容，如标题、段落等。

CSS 样式

body：设置页面的背景颜色、外边距、内边距、显示方式、对齐方式、高度等。
@property --gh：定义了一个自定义属性--gh，用于控制背景渐变的高度。
:root：定义了一个全局变量--brad，用于设置圆角大小。
.card：定义卡片的基本样式，包括位置、宽度、内边距、圆角、背景颜色、溢出隐藏等。
.card__backdrop：定义卡片背景的样式，包括绝对定位、背景图像、动画效果等。
&::before：定义一个伪元素，用于创建模糊背景效果。
&::after：定义另一个伪元素，用于创建光点效果。
.card__content：定义卡片内容的样式，包括相对定位和文本换行。
@keyframes wobble：定义了一个动画，用于控制背景渐变的高度变化，实现“摇摆”效果。

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

演示效果

HTML&CSS

HTML 结构

CSS 样式

评论记录：