动态彩色背景
参考博主：【CSS】动态彩色背景_哔哩哔哩_bilibili
径向渐变
background-image: radial-gradient() 是 CSS3 中用于创建 径向渐变（从中心向四周扩散的渐变效果）的函数。
基本语法：
background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
参数：
| 参数 | 说明 |
|---|---|
| shape | 渐变的形状（可选）circle（圆形） 或 ellipse（椭圆形，默认） |
| size | 渐变的大小（可选） 如 closest-side, farthest-corner（默认）等 |
| position | 渐变的中心位置（可选） 如 center（默认）、top left、50px 50px |
| color-stops | 颜色和位置的组合（必需） 如 red 0%, blue 50%, green 100% |
shape说明：
- 圆形渐变（circle）：
渐变半径 = 从中心到最近的 一条边 的距离。 - 椭圆渐变（ellipse）：
渐变半径 = 从中心到最近的 两条相邻边（水平边 + 垂直边）的距离。
size渐变大小说明：
| 关键字 | 描述 |
|---|---|
closest-side | 最近边（渐变最小） |
closest-corner | 最近角 |
farthest-side | 最远边 |
farthest-corner | 最远角（默认行为，渐变最大） |
示例：
-
基础圆形渐变：
background-image: radial-gradient(circle, red, blue); /* 从红色中心到蓝色边缘的圆形渐变 */
-
指定位置和颜色断点：
background-image: radial-gradient( circle at 30% 70%, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100% ); /* 中心在元素左30%、上70%，三色渐变 */
背景图片(渐变)大小
background-size 用来控制 背景图像（包括渐变）的大小，决定它在元素里显示成多大、怎么缩放或平铺。
基本语法：
background-size: 值1 [值2];
- 一个值：宽高相等（正方形或等比缩放）。
- 两个值：第一个是 宽，第二个是 高。
常用取值：
| 值 | 作用说明 | 示例 |
|---|---|---|
auto | 原始尺寸（默认） | background-size: auto; |
<length> | 固定像素值 | background-size: 60px 40px; |
<percentage> | 相对元素尺寸的百分比 | background-size: 50% 100%; |
cover | 等比放大，完全覆盖元素，可能被裁剪 | background-size: cover; |
contain | 等比缩放，完整显示图像，可能留白 | background-size: contain; |
与多层背景配合：
当写了多层背景（比如多个 radial-gradient），background-size 也能写多个值，用逗号分隔，按顺序对应每层背景：
background-image:
radial-gradient(circle, red, transparent),
radial-gradient(circle, blue, transparent);
background-size:
100px 100px, /* 第一层：直径 100px 的圆 */
200px 200px; /* 第二层：直径 200px 的圆 */
一句话总结：
background-size 就是给每层背景“定尺寸”，决定它多大、怎么缩放，常与多层渐变一起用。
背景图像(渐变)起始位置
background-position 用来指定背景图像（或渐变）在元素中的起始位置，也就是“从哪儿开始画”。
基本语法：
background-position: 水平位置 [垂直位置];
- 顺序：先写水平（x），再写垂直（y）。
- 默认值：
0% 0%（等同于left top，从左上角开始）。
常用取值：
| 写法类型 | 示例 | 说明 |
|---|---|---|
| 关键字 | left top | 左上角 |
center center | 正中间 | |
right bottom | 右下角 | |
| 百分比 | 50% 50% | 水平居中、垂直居中 |
| 长度值 | 20px 10px | 水平偏移 20px，垂直偏移 10px |
| 混合写法 | left 20px | 水平靠左，垂直向下 20px |
坐标系参考：
(0%, 0%) 左上角 (50%, 50%) 元素中心 (100%, 100%) 右下角
多层背景：如果写了多个背景，可以写多个位置，通过逗号分隔，按顺序对应每层背景：
background-image:
radial-gradient(circle, red, transparent),
radial-gradient(circle, blue, transparent);
background-position:
left top, /* 第一层：左上角 */
right bottom; /* 第二层：右下角 */
背景重复
当背景图像（或渐变）比元素本身小时，要不要重复铺、怎么重复铺。
基本语法：
background-repeat: 值;
常用取值：
| 值 | 效果 |
|---|---|
| repeat | 水平 + 垂直 都重复（默认） |
| repeat-x | 只在 水平方向 重复 |
| repeat-y | 只在 垂直方向 重复 |
| no-repeat | 不重复，只出现一次 |
| space | 不缩放，均匀留白直到填满 |
| round | 自动缩放直到整数张图刚好填满 |
vmax
vmax 是 CSS 中的一种 相对长度单位，表示 视口（viewport）宽度和高度中较大的那一个的 1%
计算公式：1vmax = 1% × max(视口宽度, 视口高度)
例如：如果浏览器窗口1200px(宽)*900px(高)，那么``1vmax = 12px`（因为 1200 > 800，取 1200 的 1%）
经常用于想让元素在不同屏幕方向上保持相对比例不变，例如圆形头像、响应式按钮、图标、卡片等。
背景滤镜
backdrop-filter 是 CSS 中专门给**“元素背后的所有内容”**加滤镜的属性，而不是给元素自身加滤镜。
最常见的用途就是“毛玻璃”效果（glassmorphism）：让元素背后的文字、图片、颜色变得模糊、变暗、变亮等，同时前景内容保持清晰可读。
基本语法：
backdrop-filter: <滤镜函数> [<滤镜函数> …] ;
常用滤镜函数：
| 函数 | 示例 | 效果 |
|---|---|---|
blur() | blur(10px) | 背景模糊 |
brightness() | brightness(1.2) | 背景变亮 20% |
contrast() | contrast(150%) | 背景对比度提升 |
saturate() | saturate(2) | 背景饱和度 ×2 |
grayscale() | grayscale(1) | 背景完全灰度 |
invert() | invert(1) | 背景反色 |
sepia() | sepia(1) | 背景复古褐色 |
hue-rotate() | hue-rotate(90deg) | 色相旋转 90° |
| 可链式叠加 | blur(8px) brightness(1.1) | 模糊 + 提亮 |
注意事项：
- 必须让元素半透明或者镂空，否则看不到背后的内容，滤镜也就没有意义。
- Safari / iOS WebView 仍要加
-webkit-backdrop-filter。 - 性能：模糊半径越大、叠加滤镜越多，GPU 负载越高；移动端谨慎使用。
案例实现一个毛玻璃效果：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Glassmorphism Demo</title>
<style>
/* 背景只是为了演示，可换成任意图片或渐变色 */
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1350&q=80')
center / cover no-repeat;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* 毛玻璃卡片 */
.glass {
padding: 3rem 4.5rem;
border-radius: 20px;
color: #fff;
text-align: center;
font-size: 1.5rem;
letter-spacing: .05em;
/* 半透明底色，让滤镜可见 */
background: rgba(255, 255, 255, 0.15);
/* 毛玻璃核心：模糊 + 轻微提亮 */
-webkit-backdrop-filter: blur(12px) saturate(1.2);
backdrop-filter: blur(12px) saturate(1.2);
/* 可选：细白边框增强质感 */
border: 1px solid rgba(255, 255, 255, 0.25);
/* 轻微阴影让卡片浮起来 */
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
</style>
</head>
<body>
<div class="glass">
<h1>Hello Glassmorphism</h1>
</div>
</body>
</html>
绘制渐变背景
前置知识学完之后，我们就来绘制渐变背景：
background-image:
radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)),
radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)),
radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)),
radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)),
radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0));
background-size:
130vmax 130vmax,
80vmax 80vmax,
90vmax 90vmax,
110vmax 110vmax,
90vmax 90vmax;
background-position:
-80vmax -80vmax,
60vmax -30vmax,
10vmax 10vmax,
-30vmax -10vmax,
50vmax 50vmax;
目前背景还是怪怪的，哪是因为所有颜色都叠加在一起了，关掉背景重复：
background-repeat: no-repeat;
再加入一个能够融合他们的背景颜色：
background-color: #e493d0;
下一步，让动画动起来：
@keyframes movement {
0%, 100% {
background-size:
130vmax 130vmax,
80vmax 80vmax,
90vmax 90vmax,
110vmax 110vmax,
90vmax 90vmax;
background-position:
-80vmax -80vmax,
60vmax -30vmax,
10vmax 10vmax,
-30vmax -10vmax,
50vmax 50vmax;
}
25% {
background-size:
100vmax 100vmax,
90vmax 90vmax,
100vmax 100vmax,
90vmax 90vmax,
60vmax 60vmax;
background-position:
-60vmax -90vmax,
50vmax -40vmax,
0vmax -20vmax,
-40vmax -20vmax,
40vmax 60vmax;
}
50% {
background-size:
80vmax 80vmax,
110vmax 110vmax,
80vmax 80vmax,
60vmax 60vmax,
80vmax 80vmax;
background-position:
-50vmax -70vmax,
40vmax -30vmax,
10vmax 0vmax,
20vmax 10vmax,
30vmax 70vmax;
}
75% {
background-size:
90vmax 90vmax,
90vmax 90vmax,
100vmax 100vmax,
90vmax 90vmax,
70vmax 70vmax;
background-position:
-50vmax -40vmax,
50vmax -30vmax,
20vmax 0vmax,
-10vmax 10vmax,
40vmax 60vmax;
}
}
运用动画：
animation: 10s movement linear infinite;
这一行是
animation属性的简写语法，把 5 个最常用的动画参数一次性写全了：animation: 10s movement linear infinite;拆开解释就是：
位置 值 含义 ① duration 10s一次动画从头到尾耗时 10 秒 ② name movement使用名为 @keyframes movement { … }的关键帧规则③ timing-function linear匀速播放（无加速、无减速） ④ iteration-count infinite无限循环，播完一次立即从头再来
最后让背景再模糊亿点，这些颜色更加的协调：
body::after {
content: '';
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); // 对Safari内核生效
}
最后添加字体衬托：
span {
position: relative;
z-index: 10;
display: flex;
min-height: 100vh;
width: 100%;
justify-content: center;
align-items: center;
font-size: 5rem;
color: transparent;
text-shadow:
0px 0px 1px rgba(255, 255, 255, .6),
0px 4px 4px rgba(0, 0, 0, .05);
letter-spacing: .2rem;
}
完整代码见：https://codepen.io/stevenlei/pen/ZEJxXGL
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
