HTML&CSS：惊艳！HTML 代码打造的动态渐变背景卡片，美到窒息这段 HTML 代码创建了一个具有动态背景渐变效果

这段 HTML 代码创建了一个具有动态背景渐变效果的卡片

演示效果

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>
        @property --rotation {
            syntax: "<angle>";
            initial-value: 0turn;
            inherits: false;
        }
        html,
        body {
            height: 100%;
            font-size: 24px;
        }
        body {
            display: grid;
            place-content: center;
            background: #202020;
        }
        .glow-card {
            aspect-ratio: 1;
            position: relative;
            color: white;
            padding: 2rem;
            border-radius: 1rem;
            overflow: hidden;
            display: grid;
            place-content: center;
            box-shadow: 0 0 40px hsl(0, 255, 255, 0.05);
            &::before {
                position: absolute;
                inset: 0;
                content: "";
                z-index: -2;
                background-image: conic-gradient(from var(--rotation, 0turn),
                        #007498,
                        #00d493,
                        #d91982,
                        #f5a95b,
                        #007498);
                animation: 7s hue-rotation infinite linear;
            }
            &::after {
                position: absolute;
                width: 94%;
                height: 94%;
                top: 3%;
                left: 3%;
                border-radius: 0.7rem;
                content: "";
                z-index: -1;
                background: black;
                filter: blur(12px);
            }
        }
        @keyframes hue-rotation {
            from {
                --rotation: 0turn;
            }
            to {
                --rotation: 1turn;
            }
        }
    </style>
</head>
<body>
    <div class="glow-card">
        开心快乐
    </div>
</body>
</html>

HTML 结构

glow-card：定义一个卡片容器，文本为“开心快乐”，类名为“glow-card”.

CSS 样式

@property --rotation：定义一个自定义属性--rotation，用于表示旋转角度，初始值为 0turn（0 度），不继承.
html, body 样式：设置页面的高度为 100%，字体大小为 24px.
body 样式：使用 grid 布局使内容居中显示，背景颜色为深灰色.
.glow-card 样式：定义卡片的尺寸、位置、颜色、内边距、形状、显示方式和阴影效果.
.glow-card::before 伪元素：创建卡片的背景渐变效果.
.glow-card::after 伪元素：创建卡片的模糊效果.
@keyframes hue-rotation：定义动画的关键帧，使背景渐变旋转.