B31. 背景阴影变形过渡

1.1. ⭐ 渐变背景的语法

纯色的背景有些单调，别担心，渐变色背景让界面更加炫酷！

TIP

所有的渐变背景都写在 background-image 中，这是因为渐变本质是一种可以通过少量参数生成的图片。

1.1.1. ⭐ 线性渐变

语法：设置属性 background-image 为 linear-gradient()，其中：

第一个参数设置方向
后面的参数依次设置颜色

csshtml

css

.gradient {
  width: 200px;
  height: 200px;

  /* 以下三选一 */

  /* 基础用法 */
  background-image: linear-gradient(red, blue);

  /* 带方向的渐变 */
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);

  /* 带色标的渐变（重点！） */
  background-image: linear-gradient(
    45deg,
    yellow 0%,  /* 0%开始是黄色 */
    orange 30%, /* 30%过渡到橙色 */
    red 100%    /* 100%结束为红色 */
  );
}

html

<div class="gradient"></div>

需要注意的是，在写颜色对应的位置时，先写颜色，然后写位置；切勿忘记逗号。

方向参数遵循时钟方向，即默认 0deg 为从下到上，其余角度值表示顺时针旋转。

参数形式	描述	示例方向	角度值（deg）
`to top`	从下到上	↑	`0deg`
`to right`	从左到右	→	`90deg`
`to bottom`	从上到下	↓	`180deg`
`to left`	从右到左	←	`270deg`
`45deg`	自定义角度	↗（45度）	`45deg`

1.1.2. 径向渐变

css

/* 基础圆形渐变 */
background-image: radial-gradient(circle, pink, white);

/* 椭圆+定位 */
background-image: radial-gradient(
  ellipse farthest-side at top right,  /* 形状 + 大小 + 起点 */
  #89ff9d,              /* 起始颜色 */
  #2596be               /* 结束颜色 */
);

径向渐变参数说明：

参数	说明	示例值
【可选】形状	定义渐变形状	`circle`（默认）、`ellipse`
【可选】定位起点	渐变中心位置	`center`（默认）、`top right`、`70% 50%`
【可选】背景大小	渐变最外圈位置	`closest-corner`、`farthest-side`
色标列表	定义颜色与位置	`blue 40%`、`#ff0000`

1.2. ⭐ 使用图片背景

背景，除了颜色之外，最重要的便是图片了。

css

.background-box {
  background-image: url('img.jpg');
  background-repeat: no-repeat;  /* 防止铺满 */
  background-position: center;   /* 居中显示 */
  background-size: cover;        /* 自适应填满 */
}

background-size 参数对比表:

参数值	说明	适用场景
`auto`	宽高按比例缩放，保持原始尺寸	需保留原始尺寸时
`cover`	等比缩放填满容器，可能裁剪内容	需覆盖容器全区域
`contain`	等比缩放适应容器，留白区域	需完整显示图片时
`100% 100%`	强制拉伸填充容器，可能失真	需完全填充且不关心比例

1.3. ⭐ 元素阴影的使用

见过 PPT 的各种阴影效果吗？CSS 也可以通过参数精准调控！

1.3.1. ⭐ 盒阴影

csshtml

css

.container {
  width: 100px;
  height: 100px;
  margin: 16px;

  /* 以下阴影三选一 */
  /* 基础阴影 */
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);

  /* 内阴影+扩散 */
  box-shadow: 0 0 5px 2px pink inset;

  /* 多层阴影（用逗号分隔） */
  box-shadow:
    1px 1px 3px yellow,
    -1px -1px 5px blue;
}

html

<div class="container"></div>

盒阴影参数顺序表：

参数名	单位/格式	说明	示例值
水平偏移	`px`	阴影水平位移	`5px`
垂直偏移	`px`	阴影垂直位移	`5px`
模糊半径	`px`	模糊程度（值越大越模糊）	`10px`
扩散半径	`px`（可选）	阴影扩展量（负值收缩）	`2px`
颜色	`color`	阴影颜色	`rgba(0,0,0,0.3)`
`inset`	关键字（可选）	内阴影标志	`inset`

1.3.2. 文字阴影

csshtml

css

.container {
  width: 16rem;
  text-align: center;
  font-size: 2rem;
  padding: 1rem;

  /* 以下文字阴影二选一 */
  /* 简单投影 */
  text-shadow: 2px 2px 4px gray;

  /* 多重文字阴影 */
  text-shadow:
    1px 1px 2px red,
    -1px -1px 2px blue;
}

html

<div class="container">Text</div>

文字阴影参数对比:

参数值	效果描述	示例效果
`2px 2px 4px`	右下投影，中等模糊	类似浮雕效果
`0 0 10px`	无位移，纯模糊	光晕效果

1.4. 🌟 元素变形为动画奠定基础

变形是网页动态效果的魔法棒！通过旋转、缩放等操作，可以让静态的元素瞬间活起来，为实现酷炫动画提供基础能力。

1.4.1. 🌟 基础变形

css

/* 平移 */
transform: translate(10px, 20px);

/* 旋转 */
transform: rotate(45deg);

/* 缩放 */
transform: scale(1.5);

/* 倾斜 */
transform: skew(20deg, 10deg);

图示：

transform 效果展示

transform 属性参数说明：

函数名	参数说明	示例值
`translate`	`x`（必填）、`y`（可选）	`translateX(10px)`
`rotate`	`angle`（角度）	`rotate(45deg)`
`scale`	`x`（必填）、`y`（可选）	`scale(1.5, 0.8)`
`skew`	`x-angle`（必填）、`y-angle`（可选）	`skewX(20deg)`

1.4.2. ⭐ 多变形组合

css

transform:
  translate(50px)  /* 第一步：右移50px */
  rotate(30deg)    /* 第二步：旋转30度 */
  scale(0.8);      /* 第三步：缩小到80% */

变形执行顺序规则：

按书写顺序依次叠加
先旋转后平移 ≠ 先平移后旋转（顺序影响最终位置，读者可尝试调换上述代码顺序）

1.4.3 变形中心点

许多变形操作都有中心点：

rotate：以谁为旋转中心？
scale：以谁为中心点（位似中心）放大？

这些都由 transform-origin 属性控制，默认在元素中心。

css

/* 定义中心点在右上角 */
transform-origin: top right;

/* 自定义坐标 */
transform-origin: 20px 30px;

transform-origin 取值方式：

形式	说明	示例值
关键字	`top`/`bottom` + `left`/`right`	`top right`
百分比	相对元素宽高的百分比	`50% 50%`（默认）
像素值	相对元素左上角的坐标	`20px 30px`

1.4.4 3D变形

浏览器提供了基础的 3D 功能。由于界面是 xOy 平面，界面的“深浅”是 z 轴，所以只要不是绕 z 轴的旋转，都会导致 3D 变换效果。

css

transform: rotateX(30deg) rotateY(45deg);  /* 绕X、Y轴旋转 */
transform-style: preserve-3d; /* 保留3D空间 */

3D变形函数示例

函数名	效果描述	示例值
`rotateX()`	绕X轴旋转	`rotateX(30deg)`
`rotateY()`	绕Y轴旋转	`rotateY(45deg)`
`perspective`	设置透视深度（需父元素）	`perspective(1000px)`

1.5. 🌟 过渡为元素添加基础动画

当元素的颜色、大小发生变化，一步到位的“突变”难免过于突兀。这时就需让元素从一种状态平滑过渡到另一种状态。

css

.container {
  /* 最简写法 */
  transition: all 0.3s;

  /* 针对单个属性详细设置 */
  transition: color 0.5s ease-in-out;

  /* 针对多属性分别详细设置 */
  transition:
    color 0.5s ease-in-out,  /* 颜色过渡 */
    transform 1s linear;      /* 变形过渡 */
}

过渡属性详解：

属性名	说明	示例值
`transition-property`	需过渡的属性名	`all` / `width`
`transition-duration`	过渡持续时间（秒/毫秒）	`0.3s`
`transition-timing-function`	缓动函数（先快后慢？先慢后快？）	`ease-in-out`
`transition-delay`	过渡延迟时间	`0.1s`

主要应用于鼠标悬停等的动画效果或应用 JavaScript 进行修改，其中悬停等参见：

B32.3. 伪类

知识回顾

渐变

线性渐变：通过 linear-gradient() 定义方向和颜色

css

/* 从左上到右下渐变 */
background-image: linear-gradient(to bottom right, red, blue);

径向渐变：用 radial-gradient() 控制形状和位置

css

/* 椭圆渐变从右上角扩散 */
background-image: radial-gradient(ellipse at top right, pink, white);

方向与色标：角度参数遵循时钟方向，色标需写 颜色 + %

css

/* 45度渐变，30%处过渡到橙色 */
linear-gradient(45deg, yellow 0%, orange 30%, red 100%);

图片背景

基础属性：background-size: cover 自适应填充容器

css

.background-box {
  background-size: cover; /* 等比缩放裁剪边缘 */
  background-repeat: no-repeat; /* 防止重复铺满 */
}

精灵图技术：通过背景定位裁剪图标

css

.icon-home {
  background: url('sprite.png') -10px -20px; /* 裁剪位置 */
  width: 32px; height: 32px;
}

阴影效果

盒阴影参数顺序：水平偏移垂直偏移模糊半径扩散半径颜色 inset
css
```
/* 内阴影+扩散 */
box-shadow: 0 0 5px 2px pink inset;
```
1
2

文字阴影：支持多重阴影和模糊效果

css

text-shadow: 2px 2px 4px gray, /* 右下投影 */
             0 0 10px blue;    /* 光晕效果 */

变形操作

基础变形组合：按书写顺序叠加执行

css

transform: translate(50px) rotate(30deg) scale(0.8);

变形中心控制：通过 transform-origin 调整轴心

css

/* 旋转中心点在右上角 */
transform-origin: top right;

3D变形：需配合 perspective 创建空间感

css

.parent { perspective: 1000px; }
.child { transform: rotateY(45deg); }

过渡动画

多属性过渡设置：

css

transition:
  color 0.5s ease-in-out,       /* 颜色渐变 */
  transform 1s linear;          /* 变形匀速 */

生效条件：必须写在原始状态，且明确 transition-property

css

/* 正确写法 */
.box { transition: all 0.3s; }
/* 错误写法：未指定属性 */
.box { transition: 0.3s; }

课后练习

（选择）以下哪个写法能让背景图等比缩放填满容器？
- A. background-size: auto
- B. background-size: contain
- C. background-size: cover
- D. background-size: 100%
（填空）补全代码实现从左上到右下的线性渐变：linear-gradient(to ______, red, blue)

（纠错）找出错误：

css

.box {
  box-shadow: 5px 5px 10px 2px red inset,
              0 0 5px blue;
  transition: 0.3s;
}

实现按钮效果：
- 默认状态：浅蓝到深蓝的线性渐变
- 悬停时：放大 1.2 倍，添加 5px 模糊的紫色外阴影
- 过渡时间 0.4 秒，使用 ease-out 缓动
设计一个天气卡片：
- 使用精灵图显示天气图标（晴天/雨天等）
- 悬停时图标放大并旋转360度
- 背景用径向渐变模拟光照效果
- 允许用CSS滤镜实现额外效果

参考答案

C：cover 会等比缩放填满容器，可能裁剪边缘。
bottom right：to bottom right 表示从左上到右下方向。

纠错：

css

.box {
  box-shadow: 5px 5px 10px 2px red inset,  /* 参数顺序错误！应为：x y 模糊 扩散 */
              0 0 5px blue;
  transition: 0.3s;  /* 必须指定过渡属性，如 `all` */
}

修改后：

css

box-shadow: 5px 5px 2px 10px red inset, 0 0 5px blue;
transition: all 0.3s;

按钮代码：

css

.button {
  background: linear-gradient(#007bff, #0056b3);
  transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
}
.button:hover {
  transform: scale(1.2);
  box-shadow: 0 0 5px 5px purple;
}

天气卡片思路：

css

.weather-card {
  background: radial-gradient(circle, white, lightblue);
  transition: transform 0.5s;
}
.weather-card:hover {
  transform: scale(1.1) rotate(360deg);
}
.weather-icon {
  background: url('weather-sprite.png') 0 0; /* 根据状态切换坐标 */
}

拓展阅读

CSS 精灵图

🧱 A1. HTML 入门

🎨 A2. CSS 入门

⚡ A3. JavaScript 入门

🌐 B1. Web 通识及工具

🧱 B2. HTML 进阶

🎨 B3. CSS 进阶

⚡ B4. JavaScript 初级

⚡ C1. JavaScript 进阶

📦 C2. 环境搭建与网页部署

🛡️ C3. TypeScript 基础

🔧 C4. Vue 基础

🎨 C5. CSS 高级

💡 D1. 算法基础

🛡️ D2. Typescript 进阶

🔧 D3. Vue 进阶

⚙️ D4. 前端原理

☁️ E1. 服务器基础

☁️ E2. Express.js 基础

B31. 背景阴影变形过渡

1.1. ⭐ 渐变背景的语法

1.1.1. ⭐ 线性渐变

1.1.2. 径向渐变

1.2. ⭐ 使用图片背景

1.3. ⭐ 元素阴影的使用

1.3.1. ⭐ 盒阴影

1.3.2. 文字阴影

1.4. 🌟 元素变形为动画奠定基础

1.4.1. 🌟 基础变形

1.4.2. ⭐ 多变形组合

1.4.3 变形中心点

1.4.4 3D变形

3D变形函数示例

1.5. 🌟 过渡为元素添加基础动画

知识回顾

课后练习

拓展阅读

B31. 背景 阴影 变形 过渡 ​

1.1. ⭐ 渐变背景的语法 ​

1.1.1. ⭐ 线性渐变 ​

1.1.2. 径向渐变 ​

1.2. ⭐ 使用图片背景 ​

1.3. ⭐ 元素阴影的使用 ​

1.3.1. ⭐ 盒阴影 ​

1.3.2. 文字阴影 ​

1.4. 🌟 元素变形为动画奠定基础 ​

1.4.1. 🌟 基础变形 ​

1.4.2. ⭐ 多变形组合 ​

1.4.3 变形中心点 ​

1.4.4 3D变形 ​

3D变形函数示例 ​

1.5. 🌟 过渡为元素添加基础动画 ​

知识回顾 ​

课后练习 ​

拓展阅读 ​

B31. 背景阴影变形过渡

1.1. ⭐ 渐变背景的语法

1.1.1. ⭐ 线性渐变

1.1.2. 径向渐变

1.2. ⭐ 使用图片背景

1.3. ⭐ 元素阴影的使用

1.3.1. ⭐ 盒阴影

1.3.2. 文字阴影

1.4. 🌟 元素变形为动画奠定基础

1.4.1. 🌟 基础变形

1.4.2. ⭐ 多变形组合

1.4.3 变形中心点

1.4.4 3D变形

3D变形函数示例

1.5. 🌟 过渡为元素添加基础动画

知识回顾

课后练习

拓展阅读