这个页面实现了一个具有动态背景效果的卡片布局，每个卡片都有独特的背景颜色和光效。页面使用了 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：定义了一个动画，用于控制背景渐变的高度变化，实现“摇摆”效果。
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！
评论记录：
回复评论：