当前位置：首页 > article >正文

CSS中的transition与渐变

article 2025/3/24 14:00:52

一、CSS transition

1. 核心属性

简写语法

2. 子属性详解

2.1 transition-property

2.2 transition-duration

2.3 transition-timing-function

2.4 transition-delay

3. 使用场景示例

3.1 悬停效果（Hover）

3.2 展开/收起动画

3.3 动态移动元素

4. 注意事项

4.1 支持过渡的属性

4.2 性能优化

4.3 浏览器兼容性

5. 高级技巧

5.1 多属性独立配置

5.2 与 JavaScript 结合

5.3 检测过渡结束事件

二、CSS 渐变

一、线性渐变（linear-gradient）

1. 基本语法

2. 参数说明

3. 示例

二、径向渐变（radial-gradient）

1. 基本语法

2. 参数说明

3. 示例

三、圆锥渐变（conic-gradient）

1. 基本语法

2. 参数说明

3. 示例

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

1. 类型

2. 关键点

五、高级技巧与应用场景

1. 透明渐变

2. 多背景叠加

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>