CSS中的transition与渐变

目录

[一、CSS transition](#一、CSS transition)

[1. 核心属性](#1. 核心属性)

简写语法

[2. 子属性详解](#2. 子属性详解)

[2.1 transition-property](#2.1 transition-property)

[2.2 transition-duration](#2.2 transition-duration)

[2.3 transition-timing-function](#2.3 transition-timing-function)

[2.4 transition-delay](#2.4 transition-delay)

[3. 使用场景示例](#3. 使用场景示例)

[3.1 悬停效果（Hover）](#3.1 悬停效果（Hover）)

[3.2 展开/收起动画](#3.2 展开/收起动画)

[3.3 动态移动元素](#3.3 动态移动元素)

[4. 注意事项](#4. 注意事项)

[4.1 支持过渡的属性](#4.1 支持过渡的属性)

[4.2 性能优化](#4.2 性能优化)

[4.3 浏览器兼容性](#4.3 浏览器兼容性)

[5. 高级技巧](#5. 高级技巧)

[5.1 多属性独立配置](#5.1 多属性独立配置)

[5.2 与 JavaScript 结合](#5.2 与 JavaScript 结合)

[5.3 检测过渡结束事件](#5.3 检测过渡结束事件)

[二、CSS 渐变](#二、CSS 渐变)

一、线性渐变（linear-gradient）

[1. 基本语法](#1. 基本语法)

[2. 参数说明](#2. 参数说明)

[3. 示例](#3. 示例)

二、径向渐变（radial-gradient）

[1. 基本语法](#1. 基本语法)

[2. 参数说明](#2. 参数说明)

[3. 示例](#3. 示例)

三、圆锥渐变（conic-gradient）

[1. 基本语法](#1. 基本语法)

[2. 参数说明](#2. 参数说明)

[3. 示例](#3. 示例)

四、重复渐变（repeating-*-gradient）

[1. 类型](#1. 类型)

[2. 关键点](#2. 关键点)

五、高级技巧与应用场景

[1. 透明渐变](#1. 透明渐变)

[2. 多背景叠加](#2. 多背景叠加)

[3. 实用场景](#3. 实用场景)

4.总结

示例：

---

一、CSS transition

transition 用于在 CSS 属性值变化时 添加平滑的过渡动画效果。它通过定义状态变化的中间过程，让元素的变化更自然。

---

1. 核心属性

transition 包含以下四个子属性，可按顺序简写：

属性	作用	示例值
transition-property	指定应用过渡的 CSS 属性名称	width, all
transition-duration	定义过渡动画的持续时间	2s（2秒）
transition-timing-function	控制动画的速度曲线（如匀速、加速等）	ease, cubic-bezier()
transition-delay	设置动画开始前的延迟时间	0.5s（0.5秒）

简写语法

示例：

.box {
  transition: width 0.3s ease-in-out 0.1s;
}

---

2. 子属性详解

2.1 transition-property

• 作用：明确哪些 CSS 属性需要过渡效果。

• 值：

  • 单个属性：width, opacity, transform 等。

  • 多个属性：逗号分隔，如 width, height。

  • 所有属性：all（慎用，可能影响性能）。

.box {
  transition-property: width, background-color;
}

2.2 transition-duration

• 作用：定义过渡动画的持续时间。

• 单位 ：秒（s）或毫秒（ms），如 0.5s 或 500ms。

• 必填项：如果省略，过渡不会生效。

.box {
  transition-duration: 0.3s;
}

2.3 transition-timing-function

• 作用 ：控制动画的 速度变化曲线。

• 常用值：

  • ease（默认）：慢速开始，中间加速，结尾减速。

  • linear：匀速动画。

  • ease-in：缓慢开始，逐渐加速。

  • ease-out：快速开始，逐渐减速。

  • ease-in-out：慢速开始和结束，中间加速。

  • cubic-bezier(n,n,n,n)：自定义贝塞尔曲线（如 cubic-bezier(0.25, 0.1, 0.25, 1)）。

.box {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

2.4 transition-delay

• 作用：设置动画触发后的延迟时间。

• 单位 ：秒（s）或毫秒（ms）。

.box {
  transition-delay: 0.2s; /* 等待 0.2 秒后开始动画 */
}

---

3. 使用场景示例

3.1 悬停效果（Hover）

.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: red;
}

• 鼠标悬停时，按钮背景色在 0.3 秒内从蓝色平滑过渡到红色。

3.2 展开/收起动画

.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.panel.active {
  max-height: 500px;
}

• 通过切换类名 .active，元素高度在 0.5 秒内展开或收起。

3.3 动态移动元素

.box {
  transform: translateX(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.box.move {
  transform: translateX(100px);
}

• 元素在 0.4 秒内向右移动 100px，使用自定义速度曲线。

---

4. 注意事项

4.1 支持过渡的属性

• 数值型属性 ：width, height, opacity, color, transform 等。

• 不支持过渡的情况：

  • display: none ↔ display: block（无法过渡，需改用 visibility 或 opacity）。

  • 属性值从无单位到有单位（如 height: 0 → height: auto）。

4.2 性能优化

• 优先使用 GPU 加速属性 ：如 transform 和 opacity，减少重排（Reflow）。

• 避免频繁触发过渡：如大量元素同时动画可能影响性能。

4.3 浏览器兼容性

• 现代浏览器均支持 transition，但旧版本可能需要前缀（如 -webkit-transition）。

---

5. 高级技巧

5.1 多属性独立配置

.box {
  transition: 
    width 0.3s ease,
    height 0.5s linear 0.2s;
}

• width 过渡：0.3 秒，缓动函数为 ease。

• height 过渡：0.5 秒，匀速，延迟 0.2 秒。

5.2 与 JavaScript 结合

通过动态修改类名或样式触发过渡：

element.classList.add('active'); // 触发过渡

5.3 检测过渡结束事件

element.addEventListener('transitionend', () => {
  console.log('过渡结束！');
});

---

二、CSS 渐变

CSS 渐变允许创建平滑的颜色过渡效果，替代静态图像，提升性能与灵活性。主要类型包括 线性渐变 、径向渐变 、圆锥渐变 和 重复渐变。以下是详细解析：

---

一、线性渐变（linear-gradient）

作用：沿一条直线方向生成颜色过渡。

1. 基本语法

background: linear-gradient(
    [方向或角度],
    颜色断点1, 
    颜色断点2,
    ...
);

2. 参数说明

• 方向或角度：

  • 关键词 ：to right（向右）、to bottom left（向右下）、to 45deg（45度方向）。

  • 角度 ：0deg（向上）到 360deg，顺时针计算。

• 颜色断点：

  • 颜色 位置，如 #ff0000 20%。

  • 位置可省略，浏览器自动均分。

3. 示例

/* 水平红到蓝渐变 */
.box {
  background: linear-gradient(
    to right, 
    red, 
    blue
  ); 
}

/* 对角三色渐变 */
.box2 {
  background: linear-gradient(
    45deg, 
    red 0%, 
    yellow 50%, 
    green 100%
  ); 
}

效果：

• .box：从左到右由红渐变为蓝。

• .box2：从45度方向，红→黄（50%处）→绿。

---

二、径向渐变（radial-gradient）

作用：从中心点向外辐射生成颜色过渡。

1. 基本语法

background: radial-gradient(
    [形状 大小 at 位置], 
    颜色断点1, 
    颜色断点2, 
    ...
);

2. 参数说明

• 形状：

  • circle（圆形）或 ellipse（椭圆，默认）。

• 大小：

  • closest-side、farthest-corner（默认）、具体尺寸（如 200px 100px）。

• 位置：

  • at center（默认中心）、at top right（右上角）。

• 颜色断点：同线性渐变。

3. 示例

/* 中心红到蓝圆形渐变 */
.box {
  background: radial-gradient(
    circle at center, 
    red, 
    blue
  );
}

.box2 {
  background: radial-gradient(
    ellipse farthest-corner at 20% 80%, 
    red, 
    yellow 50%, 
    green
  );
}

效果：

• .box：中心红向外扩散到蓝。

• .box2：椭圆渐变，中心点位于20% 80%，红→黄（50%处）→绿，扩散至最远角落。

---

三、圆锥渐变（conic-gradient）

作用：围绕中心点旋转生成颜色过渡，适合创建色轮或饼图。

1. 基本语法

background: conic-gradient(
    [from 角度] 
    [at 位置], 
    颜色断点1, 
    颜色断点2, 
    ...
);

2. 参数说明

• 起始角度 ：from 45deg（默认0deg，即12点钟方向）。

• 位置 ：at center（默认）。

• 颜色断点 ：颜色可指定角度位置，如 yellow 25%。

3. 示例

/* 色轮渐变 */
.box {
  background: conic-gradient(
    red, 
    yellow, 
    green, 
    blue, 
    red
  ); 
}

.box2 {
  background: conic-gradient(
    from 90deg at 30% 50%, 
    red 0deg 90deg, 
    yellow 90deg 180deg, 
    green 180deg
  );
}

效果：

• .box：顺时针红→黄→绿→蓝→红循环。

• .box2：从90度（3点钟方向）开始，红占90度，黄占90度，绿占剩余角度，中心点位于30% 50%。

---

四、重复渐变（repeating-*-gradient）

作用：重复基础渐变图案，填充元素背景。

1. 类型

• repeating-linear-gradient

• repeating-radial-gradient

• repeating-conic-gradient

2. 关键点

• 颜色断点需定义长度/百分比范围，才能触发重复。

• 示例：

  /* 重复红→蓝→红的水平条纹 */
  .box {
    background: repeating-linear-gradient(
      45deg, 
      red 0 10%, 
      blue 10% 20%, 
      red 20% 30%
    );
  }

效果：45度方向，每30%重复一次红→蓝→红条纹。

---

五、高级技巧与应用场景

1. 透明渐变

/* 半透明渐变 */
.box {
  background: linear-gradient(
    to right, 
    rgba(255,0,0,0.5), 
    rgba(0,0,255,0.5)
  ); 
}

2. 多背景叠加

.box {
  background: 
    linear-gradient(
        to bottom, 
        rgba(0,0,0,0.5), 
        transparent
        ),
    url("image.jpg"); /* 叠加渐变与图片 */
}

3. 实用场景

• 按钮背景：线性渐变提升立体感。

• 进度条：重复线性渐变模拟条纹进度。

• 色轮/饼图：圆锥渐变直接绘制。

• 阴影/高光：径向渐变模拟光照效果。

4.总结

• 线性渐变：适用于水平/垂直/对角线颜色过渡。

• 径向渐变：适合圆形/椭圆发光、光斑效果。

• 圆锥渐变：专为色轮、角度指示设计。

• 重复渐变：创建条纹、网格等重复图案。

• 组合使用：可叠加多渐变或与图片混合，实现复杂视觉效果。

---

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            position: relative;
            width: 300px;
            height: 212px;
            margin: 100px auto;
        }

        .box img {
            width: 300px;
        }
        
        .box .cover {
            position: absolute;
            bottom: 0;

            width: 100%;
            height: 100%;

            background-image: linear-gradient(
                transparent,
                rgba(0,0,0,0.5)
            );
            opacity: 0;
        }

        .box .cover:hover {
            opacity: 1;
        }

        .text {
            width: 130px;
            margin: 150px auto;
            color: #ffffff;
        }

    </style>
</head>
<body>
    
    <div class="box">
        <img src="./res/product.jpg" alt="">
        <div class="cover">
            <div class="text">
                <p>处理特殊场景需求</p>
                <p>动态适配设备环境</p>
            </div>
        </div>
    </div>

</body>
</html>