【样式效果】纯CSS从零到一实现动态彩色背景效果

动态彩色背景

径向渐变

background-image: radial-gradient() 是 CSS3 中用于创建 径向渐变（从中心向四周扩散的渐变效果）的函数。

基本语法：

javascript 复制代码

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`	最远角（默认行为，渐变最大）

示例：

基础圆形渐变：

javascript 复制代码

background-image: radial-gradient(circle, red, blue);
/* 从红色中心到蓝色边缘的圆形渐变 */

指定位置和颜色断点：

javascript 复制代码

background-image: radial-gradient(
  circle at 30% 70%, 
  #ff6b6b 0%, 
  #4ecdc4 50%, 
  #45b7d1 100%
);
/* 中心在元素左30%、上70%，三色渐变 */

背景图片(渐变)大小

background-size 用来控制 背景图像（包括渐变）的大小，决定它在元素里显示成多大、怎么缩放或平铺。

基本语法：

javascript 复制代码

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 也能写多个值，用逗号分隔，按顺序对应每层背景：

javascript 复制代码

background-image:
  radial-gradient(circle, red, transparent),
  radial-gradient(circle, blue, transparent);
background-size:
  100px 100px,   /* 第一层：直径 100px 的圆 */
  200px 200px;   /* 第二层：直径 200px 的圆 */

一句话总结：
background-size 就是给每层背景"定尺寸"，决定它多大、怎么缩放，常与多层渐变一起用。

背景图像(渐变)起始位置

background-position 用来指定背景图像（或渐变）在元素中的起始位置，也就是"从哪儿开始画"。

基本语法：

javascript 复制代码

background-position: 水平位置 [垂直位置];

顺序：先写水平（x），再写垂直（y）。
默认值 ：0% 0%（等同于 left top，从左上角开始）。

常用取值：

写法类型	示例	说明
关键字	`left top`	左上角
	`center center`	正中间
	`right bottom`	右下角
百分比	`50% 50%`	水平居中、垂直居中
长度值	`20px 10px`	水平偏移 20px，垂直偏移 10px
混合写法	`left 20px`	水平靠左，垂直向下 20px

坐标系参考：
javascript 复制代码
(0%, 0%) 左上角
(50%, 50%) 元素中心
(100%, 100%) 右下角

多层背景：如果写了多个背景，可以写多个位置，通过逗号分隔，按顺序对应每层背景：

javascript 复制代码

background-image:
  radial-gradient(circle, red, transparent),
  radial-gradient(circle, blue, transparent);

background-position:
  left top,    /* 第一层：左上角 */
  right bottom; /* 第二层：右下角 */

背景重复

当背景图像（或渐变）比元素本身小时，要不要重复铺、怎么重复铺。

基本语法：

javascript 复制代码

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）：让元素背后的文字、图片、颜色变得模糊、变暗、变亮等，同时前景内容保持清晰可读。

基本语法：

javascript 复制代码

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 负载越高；移动端谨慎使用。

案例实现一个毛玻璃效果：

javascript 复制代码

<!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>

绘制渐变背景

前置知识学完之后，我们就来绘制渐变背景：

javascript 复制代码

  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;

目前背景还是怪怪的，哪是因为所有颜色都叠加在一起了，关掉背景重复：

javascript 复制代码

  background-repeat: no-repeat;

再加入一个能够融合他们的背景颜色：

javascript 复制代码

  background-color: #e493d0;

下一步，让动画动起来：

javascript 复制代码

@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;
  }
}

运用动画：

javascript 复制代码

animation: 10s movement linear infinite;

这一行是 animation 属性的简写语法，把 5 个最常用的动画参数一次性写全了：
javascript 复制代码
animation: 10s movement linear infinite;
拆开解释就是：

位置值含义

① duration 10s 一次动画从头到尾耗时 10 秒

② name movement 使用名为 @keyframes movement { ... } 的关键帧规则

③ timing-function linear 匀速播放（无加速、无减速）

④ iteration-count infinite 无限循环，播完一次立即从头再来

位置	值	含义
① duration	`10s`	一次动画从头到尾耗时 10 秒
② name	`movement`	使用名为 `@keyframes movement { ... }` 的关键帧规则
③ timing-function	`linear`	匀速播放（无加速、无减速）
④ iteration-count	`infinite`	无限循环，播完一次立即从头再来

最后让背景再模糊亿点，这些颜色更加的协调：

javascript 复制代码

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内核生效
}

最后添加字体衬托：

javascript 复制代码

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