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

CSS-5.1 Transition 过渡

article 2025/9/13 17:23:26

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。

HTML系列文章已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！

点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！

系列文章目录

CSS- 1.1 css选择器

CSS- 2.1 实战之图文混排、表格、表单、学校官网一级导航栏

CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性

CSS- 4.1 浮动（Float）

CSS- 4.2 相对定位（position: relative）

CSS- 4.3 绝对定位（position: absolute）&学校官网导航栏实例

CSS- 4.4 固定定位（fixed）& 咖啡售卖官网实例

CSS- 4.5 css + div 布局 & 简易网易云音乐官网布置实例

CSS- 4.6 radiu、shadow、animation动画

CSS-5.1 Transition 过渡

系列文章目录

前言

一、Transition 过渡详解

1.基本概念

2.语法

3.常用过渡属性

4.示例

1. 基础悬停效果

2. 尺寸变化过渡

3. 透明度过渡

4. 多属性过渡

5.高级用法

1. 使用 all 关键字

2. 指定多个过渡

3. 结合 transform 实现高性能动画

6.速度曲线函数

7.注意事项

8.实际应用场景

二、代码实例

1. css3-transition过渡代码如下：

2. 过渡应用1 代码如下：

3. 过渡应用2 代码如下：

4. 过渡应用3 代码如下：

总结

前言

小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！

一、Transition 过渡详解

CSS3 的 transition 属性允许元素在状态变化时（如悬停、点击等）产生平滑的动画效果，而无需使用 JavaScript。它是创建简单动画效果的一种高效方式。

1.基本概念

transition 属性是以下四个子属性的简写：

transition-property：指定应用过渡效果的 CSS 属性
transition-duration：指定过渡效果持续的时间
transition-timing-function：指定过渡效果的速度曲线
transition-delay：指定过渡效果开始前的延迟时间

2.语法

css

.element {transition: property duration timing-function delay;
}

或分别指定：

css

.element {transition-property: width;transition-duration: 0.5s;transition-timing-function: ease-in-out;transition-delay: 0.2s;
}

3.常用过渡属性

任何可以动画化的 CSS 属性都可以使用过渡效果，常见的包括：

color（颜色）
background-color（背景色）
width（宽度）
height（高度）
opacity（透明度）
transform（变形）
border-radius（圆角）
box-shadow（阴影）
font-size（字体大小）
margin（外边距）
padding（内边距）

4.示例

1. 基础悬停效果

css

.button {background-color: #3498db;color: white;padding: 10px 20px;border: none;border-radius: 5px;transition: background-color 0.3s ease;
}.button:hover {background-color: #2980b9;
}

效果：当鼠标悬停在按钮上时，背景色会平滑过渡到更深的蓝色。

2. 尺寸变化过渡

css

.box {width: 100px;height: 100px;background-color: #e74c3c;transition: all 0.5s ease-in-out;
}.box:hover {width: 200px;height: 200px;background-color: #c0392b;
}

效果：悬停时，盒子会平滑放大并改变颜色。

3. 透明度过渡

css

.overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0);transition: background-color 0.5s ease;
}.overlay.active {background-color: rgba(0, 0, 0, 0.5);
}

效果：叠加层在激活时平滑地从不透明变为半透明。

4. 多属性过渡

css

.card {width: 200px;height: 200px;background-color: #f1c40f;border-radius: 10px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);transition: transform 0.3s ease,box-shadow 0.3s ease;
}.card:hover {transform: translateY(-10px);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

效果：悬停时，卡片轻微上浮并阴影加深，产生浮动效果。

5.高级用法

1. 使用 `all` 关键字

css

.element {transition: all 0.3s ease;
}

注意：虽然方便，但可能影响性能，特别是当有很多属性需要过渡时。

2. 指定多个过渡

css

.element {transition: width 0.5s ease-in,height 0.3s ease-out,background-color 0.2s linear;
}

3. 结合 `transform` 实现高性能动画

css

.element {transition: transform 0.3s ease;
}.element:hover {transform: scale(1.1) rotate(5deg);
}

优势：transform 和 opacity 是由 GPU 加速的属性，性能更好。

6.速度曲线函数

ease（默认）：慢速开始，然后变快，然后慢速结束
linear：匀速
ease-in：慢速开始
ease-out：慢速结束
ease-in-out：慢速开始和结束
cubic-bezier(n,n,n,n)：自定义贝塞尔曲线

7.注意事项

性能考虑：避免对会频繁触发的属性（如 top、left）使用过渡，可能引起性能问题。
硬件加速：优先使用 transform 和 opacity 属性以获得最佳性能。
可访问性：确保过渡效果不会影响用户体验，特别是对于有运动敏感问题的用户。
兼容性：现代浏览器都支持 transition，但对于旧版浏览器可能需要前缀或回退方案。

8.实际应用场景

导航菜单悬停效果
按钮状态变化
模态框显示/隐藏
卡片悬停效果
加载指示器
图片悬停放大
表单元素焦点状态

CSS3 的 transition 属性为网页交互提供了简单而强大的工具，可以显著提升用户体验而无需编写复杂的 JavaScript 代码。合理使用过渡效果可以使网站感觉更加生动和专业。

二、代码实例

1. 过渡应用代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css3-transition过渡</title><style type="text/css">div {width: 300px;height: 100px;border: 1px solid black;text-align: center;line-height: 100px;font-size: 20px;background-color: silver;border-radius: 20px;transition: all 1s linear;}/* 触发器 hover *//* 那个元素的哪个属性发生变化 *//* div  background-color 发生变化 *//* 哪个元素的属性值发生变化 我们就把transition放在哪个属性元素对应的选择器当中 */div:hover {background-color: #45b823;color: white;border: none;}</style></head><body><h1>过渡transition</h1><p>将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”</p><div>web design</div></body>
</html>

代码运行如下：

2. 过渡应用1 代码如下：


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>过渡应用1</title><style type="text/css">* {margin: 0;padding: 0;}.showlist ul {list-style-type: none;}/* 最大的父盒子，用来进行页面居中 */.showlist {}.showlist ul li {width: 300px;height: 40px;border: 1px solid black;overflow: hidden;transition: all 1s linear;}.showlist h3 {width: 300px;height: 40px;text-align: left;line-height: 40px;}.showlist .text {width: 300px;height: 180px;background-color: white;color: black;}.showlist ul li:hover {height: 220px;background-color: black;color: white;}.showlist img {width: 300px;}</style></head><body><div class="showlist"><ul><li><h3>这是标题</h3><div class="text"><img src="../img/Leslie%20Mint.png" ></div></li><li><h3>这是标题</h3><div class="text">这是内容</div></li><li><h3>这是标题</h3><div class="text">这是内容</div></li><li><h3>这是标题</h3><div class="text">这是内容</div></li></ul></div></body>
</html>

代码运行如下：

3. 过渡应用2 代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>transition过渡应用2</title><style type="text/css">*{margin: 0;padding: 0;}.container {width: 170px;height: 190px;position: relative;overflow: hidden;float: left;margin-right: 50px;}.container .text {width: 170px;height: 190px;/* border: 1px solid black; */position: absolute;left: 170px;top: 0px;transition: all 1s linear;}.container:hover .text {left: 0px;background-color: rgba(255,255,255,.6);color: saddlebrown;}</style></head><body><div class="container"><img src="../img/kbjn.jpg" ><div class="text"><h1>标题</h1><p>对文本的解释说明</p></div></div><div class="container"><img src="../img/kbjn.jpg" ><div class="text"><h1>标题</h1><p>对文本的解释说明</p></div></div><div class="container"><img src="../img/kbjn.jpg" ><div class="text"><h1>标题</h1><p>对文本的解释说明</p></div></div></body>
</html>

代码运行如下：

4. 过渡应用3 代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>过渡应用3</title><style type="text/css">.wrap {width: 170px;height: 190px;transform-style: preserve-3d;position: relative;transition: all 1s linear;}.face {width: 170px;height: 190px;border: 1px solid saddlebrown;}.wrap:hover {transform: rotateY(180deg);}.wrap .back {/* 为了防止背面的字产生镜面效果，我们先翻180deg */transform: rotateY(180deg);background-color: saddlebrown;color: wheat;position: absolute;top: 0px;}</style></head><body><div class="wrap"><div class="face front"><img src="../img/kbjn.jpg" ></div><div class="face back"><h1>标题</h1><p>这是解释说明</p></div></div></body>
</html>

代码运行如下：

总结

以上就是今天要讲的内容，本文简单记录了Transition 过渡，仅作为一份简单的笔记使用，大家根据注释理解

CSS-5.1 Transition 过渡

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。 HTML系列文章已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！ 点…...

编程日记 2025/9/3 18:01:02

TTS：VITS-fast-fine-tuning 快速微调 VITS

1，项目概述 VITS是一种语音合成的方法，是一个完全端到端的TTS 模型，它使用预先训练好的语音编码器将文本转化为语音，并且是直接从文本到语音波形的转换，无需额外的中间步骤或特征提取。 VITS的工作流程为：…...

编程日记 2025/8/15 5:57:25

从虚拟仿真到行业实训再到具身智能--华清远见嵌入式物联网人工智能全链路教学方案

2025年5月23-25日，第63届中国高等教育博览会（高博会）将在长春中铁东北亚国际博览中心举办。作为国内高等教育领域规模大、影响力广的综合性展会，高博会始终聚焦教育科技前沿，吸引全国高校管理者、一线教师、教育科技企…...

编程日记 2025/9/11 13:34:38

告别手动绘图！2分钟用 AI 生成波士顿矩阵

波士顿矩阵作为经典工具，始终是企业定位产品组合、制定竞争策略的核心方法论。然而，传统手动绘制矩阵的方式，往往面临数据处理繁琐、图表调整耗时、团队协作低效等痛点。随着AI技术的发展，这一现状正在被彻底改变。boardmix博思白…...

编程日记 2025/9/11 15:45:12

GraphPad Prism工作表的管理

《2025新书现货 GraphPad Prism图表可视化与统计数据分析（视频教学版）雍杨康巧昆清华大学出版社教材书籍 9787302686460 GraphPadPrism图表可视化无规格》【摘要书评试读】- 京东图书 GraphPad Prism统计数据分析_夏天又到了的博客-CSDN博客工作…...

编程日记 2025/9/11 15:17:39

【modelscope/huggingface 通过colab将huggingface 模型/数据集/空间转移到 modelscope并下载】

1. 准备注册一个modelscope账号（国内的）拿到对应的访问令牌SDK/API令牌注册一个google账号， 登录colab 2. 开始干! 打开一个ipynb 安装依赖包 !pip install -qqq modelscope huggingface-hub -U选择安装git lfs !curl -s https://packag…...

编程日记 2025/8/19 6:23:16

告别静态UI！Guineration用AI打造用户专属动态界面

摘要作为智能原生操作系统 DingOS 的核心技术之一，Guineration 生成式 UI 体系深刻践行了 DingOS“服务定义软件”的核心理念。DingOS 以“一切皆服务、服务按需而取、按用付费”为设计宗旨，致力于通过智能原生能力与粒子服务架构，实现资源…...

编程日记 2025/9/7 19:55:39

第六届电子通讯与人工智能国际学术会议（ICECAI 2025）

在数字化浪潮中，电子通讯与人工智能的融合正悄然重塑世界的运行逻辑。技术基础的共生关系是这场变革的核心——电子通讯如同“信息高速公路”，通过5G等高速传输技术，将海量数据实时输送至AI系统，使其能够像人类神经系统般快速响应…...

编程日记 2025/9/11 21:05:27

【C/C++】C++并发编程：std::async与std::thread深度对比

文章目录 C并发编程：std::async与std::thread深度对比1 核心设计目的以及区别2 详细对比分析3 代码对比示例4 适用场景建议5 总结 C并发编程：std::async与std::thread深度对比在 C 中，std::async 和 std::thread 都是用于并发编程的工具&am…...

编程日记 2025/9/8 23:19:09

每日算法刷题Day11 5.20:leetcode不定长滑动窗口求最长/最大6道题，结束不定长滑动窗口求最长/最大,用时1h20min

6. 1695.删除子数组的最大得分(中等) 1695. 删除子数组的最大得分 - 力扣（LeetCode） 思想 1.给你一个正整数数组 nums ，请你从中删除一个含有若干不同元素的子数组**。**删除子数组的得分就是子数组各元素之和。返回只删除一个子…...

编程日记 2025/7/11 23:40:22

STL中的Vector(顺序表)

vector容器的基本用法： template<class T> class vector { T* _a; size_t size; size_t capacity; } 尾插和遍历： vector<int> v; v.push_back(1); v.push_back(2); v.push_back(3);//遍历 for(int i0;i<v.size();i) {cout<<…...

编程日记 2025/8/19 6:20:44

iOS Runtime与RunLoop的对比和使用

Runtime 机制核心概念 Objective-C 的动态特性：Objective-C 是一门动态语言，很多工作都是在运行时而非编译时决定的消息传递机制：方法调用实际上是发送消息 objc_msgSend(receiver, selector, ...)方法决议机制：动态方法解析、…...

编程日记 2025/9/13 7:34:10

解决vscode在任务栏显示白色图标

长久不用，不知道怎么着就显示成白色图标，虽然不影响使用，但是看起来不爽问了豆包，给了个解决方法： 1、打开隐藏文件， 由于图标缓存文件是隐藏文件，首先点击资源管理器中的 “查看” 菜单&am…...

编程日记 2025/9/11 0:56:01

架构思维：构建高并发扣减服务_分布式无主架构

文章目录 Pre无主架构的任务简单实现分布式无主架构设计和实现扣减中的返还什么是扣减的返还返还实现原则原则一：扣减完成才能返还原则二：一次扣减可以多次返还原则三：返还的总数量要小于等于原始扣减的数量原则四：返还要保证幂等…...

编程日记 2025/9/11 15:39:09

Vue 3 官方 Hooks 的用法与实现原理

Vue 3 引入了 Composition API，使得生命周期钩子（hooks）在函数式风格中更清晰地表达。本篇文章将从官方 hooks 的使用、实现原理以及自定义 hooks 的结构化思路出发，全面理解 Vue 3 的 hooks 系统。 📘 1. Vue 3 官方生…...

编程日记 2025/8/19 1:21:16

Vue3 打印表格、Element Plus 打印、前端打印、表格导出打印、打印插件封装、JavaScript 打印、打印预览

🚀 Vue3 高级表格打印工具封装（支持预览、分页、样式美化）现已更新至npm # npm npm install vue-table-print# yarn yarn add vue-table-print# pnpm pnpm add vue-table-printgithunb地址： https://github.com/zhoulongshao/vue-table-print/blob/main/README.MD关键词…...

编程日记 2025/8/18 16:35:27

湖北理元理律师事务所：专业债务优化如何助力负债者重获生活掌控权

在当前经济环境下，个人债务问题日益凸显。湖北理元理律师事务所通过其专业的债务优化服务，为负债群体提供了一条合法合规的解决路径。本文将客观分析专业债务规划的实际价值，不涉及任何营销内容。一、债务优化的核心价值科学评估&#xf…...

编程日记 2025/9/11 11:34:19

RAGFlow知识检索原理解析：混合检索架构与工程实践

一、核心架构设计 RAGFlow构建了四阶段处理流水线，其检索系统采用双路召回+重排序的混合架构： S c o r e f i n a l = α ⋅ B M...

编程日记 2025/8/19 6:08:17

5月22总结

P1024 [NOIP 2001 提高组] 一元三次方程求解题目描述有形如：$ a x^3 b x^2 c x d 0 $ 这样的一个一元三次方程。给出该方程中各项的系数（$ a,b,c,d $ 均为实数），并约定该方程存在三个不同实根（根的范围在 $ -1…...

编程日记 2025/8/10 15:10:35

Java设计模式之桥接模式：从入门到精通

1. 桥接模式概述 1.1 定义与核心思想桥接模式（Bridge Pattern）是一种结构型设计模式，它将抽象部分与实现部分分离，使它们可以独立变化。这种模式通过提供桥梁结构（Bridge）将抽象和实现解耦。专业定义：桥接模式将抽象部分与它的实现部分分离，使它们都可以独立地变化…...

编程日记 2025/8/11 21:01:37

uni-app学习笔记九-vue3 v-for指令

v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名： <template><view v-for"(item,index) in 10" :key"index"…...

编程日记 2025/9/11 15:16:39

MAC电脑中右键后复制和拷贝的区别

在Mac电脑中，右键菜单中的“复制”和“拷贝”操作在功能上有所不同： 复制功能：在选定的位置创建一个与原始文件相同的副本。快捷键：CommandD用于在当前位置快速复制文件，CommandC用于将内容复制到剪贴板。效果&…...

编程日记 2025/9/6 2:28:43

Regmap子系统之六轴传感器驱动-编写icm20607.c驱动

（一）在驱动中要操作很多芯片相关的寄存器，所以需要先新建一个icm20607.h的头文件，用来定义相关寄存器值。 #ifndef ICM20607_H #define ICM20607_H /*************************************************************** 文件名 : i…...

编程日记 2025/6/16 6:50:24