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

Web - CSS3过渡与动画

news 来源：原创 2025/5/9 21:41:22

过渡

基本使用

transition过渡属性是css3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加补间动画。

过渡从kIE10开始兼容，移动端兼容良好，网页上的动画特效基本都是由JavaScript定时器实现的，现在逐步改为css3过渡。

transition属性有4个要素：过渡属性、动画时长、变化速度曲线、延迟时间，需要注意的是时间单位后面的s是不能省略的。

所有数值类型的属性，都可以参与过渡，比如：width、height、left、top、border-radius

.box1 {width: 200px;height: 200px;background-color: orange;transition: width 5s linear 0s;margin-bottom: 10px;
}.box1:hover {width: 800px;
}

背景颜色和文字颜色都可以被过渡。

.box2:hover p {left: 1000px;
}.box3 {width: 200px;height: 200px;background-color: red;transition: background-color 1s linear 0s;margin-bottom: 10px;
}.box3:hover {background-color: green;
}

所有的变形(包括2D和3D)都能被过渡。

/**2D过渡*/
.box5 {width: 200px;height: 200px;background-color: orange;margin-bottom: 10px;transition: transform 1s linear 0s;
}.box5:hover {transform: scale(1.2) rotate(360deg);
}/**3D过渡*/
.box6 {perspective: 300px;width: 200px;height: 200px;border: 1px solid #000;margin-bottom: 10px;
}.box6 p {width: 200px;height: 200px;background-color: orange;transition: transform 1s linear 0s;
}.box6:hover p {transform: rotateX(360deg) rotateY(360deg);
}

如果要所有的属性都参数过渡，可以写all。

.box7 {width: 200px;height: 200px;background-color: orange;border-radius: 0;transition: all 1s linear 0s;
}
.box7:hover {width: 400px;height: 160px;background-color: green;border-radius: 50%;
}

过渡的四个小属性：

属性	意义
transition-property	那些属性要过渡
transition-duration	动画时间
transition-timing-function	动画变化曲线(缓动效果)
transition-delay	延迟时间

缓动效果

transition的第三个参数就是缓动参数，也是变化速度曲线，常用的缓动参数：

1、linear

线性过渡，元素在过渡过程中以恒定的速度变化，没有加速或减速效果。

2、ease

默认的缓动函数，过渡开始时较慢，然后加速，最后再减速。这是一种自然的过渡效果，常用于大多数场景。

3、ease-in

过渡开始时较慢，然后逐渐加速，结束时速度最快。常用于强调进入效果。

4、ease-out

过渡开始时速度最快，然后逐渐减速，结束时最慢。常用于强调退出效果。

5、ease-in-out

过渡开始和结束时较慢，中间加速。是 ease 函数的更明显版本。

6、cubic-bezier

自定义贝塞尔曲线缓动函数。该函数接受四个参数，分别是贝塞尔曲线的两个控制点的 x 和 y 坐标，取值范围在 0 到 1 之间。

可以去网站https://cubic-bezier.com可以生成内赛尔曲线，可以自定义动画缓动参数。

.box {width: 100px;height: 100px;background-color: red;transition: width 2s cubic-bezier(0.42, 0, 0.58, 1);
}.box:hover {width: 200px;
}

7、steps()

.box {width: 100px;height: 100px;background-color: red;transition: width 2s steps(5, end);
}.box:hover {width: 200px;
}

动画

可以使用@keyframes来定义动画，keyframes表示关键帧，在项目上线前，要补上@-webkit-这样的私有前缀。

from表示起始状态,to表示结束状态。

@keyframes movelr {from {transform: translateX(0);}to {transform: translateX(1000px);}
}

定义动画之后，就可以使用animation属性调用动画，animation参数的属性依次是：动画名字、总时长、缓动效果、延迟。

animation第五个参数就是动画的执行次数，如果想永远执行可以写infinite。

/**movelr 是定义的动画名称*/
.box2 {width: 200px;height: 200px;background-color: blue;animation: movelr 2s linear 0s infinite alternate;
}

如果想让动画的第2、4、6…偶数次自动逆行执行，那么要加上alternate参数即可。

.box2 {width: 200px;height: 200px;background-color: blue;animation: movelr 2s linear 0s infinite alternate;
}

如果想让动画停止在最后结束状态，那么要加上forwards。

.box3 {width: 200px;height: 200px;background-color: green;animation: changeToCircle 1s linear 0s forwards ;
}

多关键帧动画实例如下：

.box4 {width: 200px;height: 200px;background-color: red;animation: changeColor 3s linear 0s alternate infinite;
}@keyframes changeColor {0% {background-color: red;}20% {background-color: yellow;}40% {background-color: blue;}60% {background-color: green;}80% {background-color: purple;}100% {background-color: orange;}
}

Web - CSS3过渡与动画

过渡基本使用 transition过渡属性是css3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加补间动画。过渡从kIE10开始兼容，移动端兼容良好，网页上的动画特效基本都是由JavaScript定时器实现的，现在逐步改为css3过…...

编程日记 2025/5/9 21:41:22

css-根据不同后端返回值返回渲染不同的div样式以及公共组件设定

1.动态绑定 Vue: 使用计算属性 getClassName 来动态计算样式类名，并通过 :class 绑定到 div 元素上。 <template><div :class"getClassName">这是一个根据后端值动态设置样式的 div 元素。</div> </template><script> exp…...

编程日记 2025/4/29 10:52:31

ES6 Set 数据结构用法总结

1. Set 基本概念 Set 是 ES6 提供的新的数据结构，类似于数组，但成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。 1.1 基本用法 // 创建一个空Set const set new Set();// 创建一个带有初始…...

编程日记 2025/5/9 18:06:06

Celery任务阻塞问题排查

笔者在工作中经常用到Celery，遇到了2个任务阻塞的问题，分享经验如下。 1 Celery原理 Celery是基于Python开发的分布式任务调度框架，可以将任务发送到若干台机器上，实现多并发调度和计算。Celery的架构主要包含生产者&#xff08…...

编程日记 2025/5/9 15:47:23

巧用DeepSeek，编写CAPL自动化测试脚本

文章目录前言提问及回答小结前言蛇年伊始，火出圈的除了《哪吒2》登顶中国影史票房第一外，科技圈的DeepSeek国产大模型引爆全球，关于在DeepSeek上的提问无奇不有。就车载通信自动化测试，本文也来蹭蹭热度。作为CAN/LIN协议一致…...

编程日记 2025/5/9 13:41:24

【信息系统项目管理师】第21章：项目管理科学基础详解

更多内容请见：备考信息系统项目管理师-专栏介绍和目录文章目录 21.1 工程经济学21.2 运筹学1.线性规划2.一般的运输问题3.指派问题4.动态规划法5.最小生成树6.博弈论7.决策每年管理科学在综合题里固定是5分，案例分析和论文不考。主要是科学管理相关内容，包括工程经济学、运…...

编程日记 2025/5/9 13:59:38

webpack配置语言之---ts

由于webpack本身不支持ts，如果需要编译ts文件，需要下载相应的loader对ts文件进行编译，以及配置tsconfig.json文件，配置ts的编译选项 1. 安装必要的依赖首先，确保你已经安装了 Webpack 和 TypeScript。如果还没有安装…...

编程日记 2025/5/9 13:57:53

WPF 进度条(ProgressBar)示例一

本文讲述：WPF 进度条(ProgressBar)简单的样式修改和使用。进度显示界面：使用UserControl把ProgressBar和进度值以及要显示的内容全部组装在UserControl界面中，方便其他界面直接进行使用。 <UserControl x:Class"DefProcessBarDemo…...

编程日记 2025/5/9 13:38:59

金蛇祈福，鸿运开年！广州白云皮具城2025开市大吉！

锣鼓一响，黄金万两！2月6日大年初九，广州白云皮具城举行盛大的醒狮开市仪式！象征吉祥如意的醒狮，将好运、财运传递给全体商户和八方来客。醒狮点睛金鼓一响黄金万两，十头醒狮登台，董事总经理刘…...

编程日记 2025/5/9 14:37:32

centos虚拟机迁移没有ip的问题

故事背景，我们的centos虚拟机本来是好好的，但是拷贝到其他电脑上就不能分配ip，我个人觉得这个vmware他们软件应该搞定这个啊，因为这个问题是每次都会出现的。网络选桥接网络启动失败 service network restart Restarting netw…...

编程日记 2025/5/9 15:31:24

【ESP32cam人脸识别开门及服务器端实战源码】

本项目实现了一个基于ESP32-CAM的实时人脸识别系统，能够通过WiFi进行视频流传输，并在检测到人脸时触发开门指令。系统由两个主要部分组成：video.py（后端服务器）和 ESP32-CAM.ino（ESP32-CAM固件）…...

编程日记 2025/5/9 6:13:48

【自开发工具介绍】SQLSERVER的ImpDp和ExpDp工具04

SQLSERVER的ImpDp和ExpDp工具演示 1、指定某些表作为导出对象外 (-exclude_table) 验证用：导出的表，导入到新的数据库 2、指定某些表作为导出对象外 (-exclude_table) 支持模糊检索，可以使用星号以s开头的表作为导出对象外，…...

编程日记 2025/5/9 13:39:51

什么是中间件中间件有哪些

什么是中间件？ 中间件（Middleware）是指在客户端和服务器之间的一层软件组件，用于处理请求和响应的过程。中间件是指介于两个不同系统之间的软件组件，它可以在两个系统之间传递、处理、转换数据，以达到协…...

编程日记 2025/5/9 14:03:21

WebSocket connection failed 解决

WebSocket connection failed 解决前言这里如果是新手小白不知道 WebSocket 是什么的？ 怎么使用的？或者想深入了解的那可以点击这里几分钟带你快速了解并使用，已经一些进阶讲解； WebSocket，多应用于需要双向数据…...

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

C语言：取出32位数据的高十六位

目录背景目标操作步骤 1. 右移 16 位 2. 掩码操作（可选） 代码实现解释： 输出： 总结： 背景假设我们有一个 32 位的无符号整数，通常它是由 4 个字节组成的。每个字节由 8 位构成，4…...

编程日记 2025/5/9 14:05:02

JUnit 5 条件测试注解详解

JUnit 5 条件测试注解详解 JUnit 5 提供了一系列条件测试注解，允许开发者根据运行时环境、配置或自定义逻辑动态决定是否执行测试。这些注解能有效减少误报，提升测试的灵活性和适应性。以下是所有条件测试注解的详细介绍及示例： 一、条件测试…...

编程日记 2025/5/6 23:44:41

1 Java 基础面试题（上）

文章目录前言1. Java 中的序列化和反序列化是什么？1.1 序列化（Serialization）1.2 反序列化（Deserialization）1.3 serialVersionUID1.4 序列化的应用场景1.5 Transient 关键字 2. 为什么 Java 里面不支持多重继承&…...

编程日记 2025/5/8 2:14:15

个人笔记---关于详解threadlocal 上下文环境存储的最佳数据类型

个人原因很久没有写代码,对于一些基础的数据类型有一些忘记,可以根据gpt和我当时的问答进行复习关于拦截器,由于在请求的到达controller处理器之前,拦截器(当然过滤器也可以实现,我感觉都差不多)就把上下文设置在了线程副本中,那么这个请求到处理器的这些代码进行查询出来的上…...

编程日记 2025/5/9 12:46:59

JVM监控和管理工具

基础故障处理工具 jps jps(JVM Process Status Tool)：Java虚拟机进程状态工具功能 1：列出正在运行的虚拟机进程 2：显示虚拟机执行主类(main()方法所在的类) 3：显示进程ID(PID，Process Identifier) 命令格式 jps […...

编程日记 2025/5/9 14:21:40

【数据结构】树哈希

目录一、树的同构1. 定义2. 具体理解(1) 结点对应(2) 孩子相同(3) 递归性质 3. 示例二、树哈希1.定义2.哈希过程（1）叶节点哈希（2）非叶节点哈希（3）组合哈希值 3.性质（1） 唯一性 \re…...

编程日记 2025/5/9 14:11:49

UE5 蓝图学习计划 - Day 12：存储与加载

在游戏开发中，存储（Save）与加载（Load） 系统至关重要，玩家需要能够保存游戏进度、角色状态、道具数据等信息，并在下次启动游戏时恢复它们。UE5 提供了 SaveGame 蓝图类，帮助开发者快速…...

编程日记 2025/5/9 13:38:08

18爬虫:关于playwright相关内容的学习

1.如何在python中安装playwright 打开pycharm，进入终端，输入如下的2个命令行代码即可自动完成playwright的安装 pip install playwright ——》在python中安装playwright第三方模块 playwright install ——》安装playwright所需的工具插件和所支持的…...

编程日记 2025/5/9 14:06:04

图解BWT(Burrows-Wheeler Transform) 算法

Burrows-Wheeler Transform (BWT) 是一种数据转换算法, 主要用于数据压缩领域. 它由 Michael Burrows 和 David Wheeler 在 1994 年提出, 广泛应用于无损数据压缩算法(如 bzip2)中. BWT 的核心思想是通过重新排列输入数据, 使得相同的字符更容易聚集在一起, 从而提高后续压缩算…...

编程日记 2025/5/9 15:29:24

CMake轻松实现把编译生成文件分类输出到指定路径，同时又拷贝一份到别的指定路径（Window/Linux通用）

使用CMake管理的C项目工程你是否有以下需求： 1.项目编译时将生成的文件分类自动输出到指定位置； 2.除了上面输出到指定位置以外，还要拷贝一份到指定位置（包含头文件，配置文件，第三方依赖库文件等&#xf…...

编程日记 2025/5/9 14:36:32

黑马程序员视频地址： AJAX-Day03-01.XMLHttpRequest_基本使用https://www.bilibili.com/video/BV1MN411y7pw?vd_source0a2d366696f87e241adc64419bf12cab&spm_id_from333.788.videopod.episodes&p33https://www.bilibili.com/video/BV1MN411y7pw?vd_sour…...

编程日记 2025/5/9 15:25:25

C32.【C++ Cont】静态实现双向链表及STL库的list

目录 1.知识回顾 2.静态实现演示图 3.静态实现代码 1.初始双向链表 2.头插 3.遍历链表 4.查找某个值 4.任意位置之后插入元素 5.任意位置之前插入元素 6.删除任意位置的元素 4.STL库的list 1.知识回顾 96.【C语言】数据结构之双向链表的初始化,尾插,打印和尾删 97.【C…...

编程日记 2025/5/9 15:01:48

【Elasticsearch】terms聚合误差问题

Elasticsearch中的聚合查询在某些情况下确实可能存在误差，尤其是在处理分布式数据和大量唯一值时。这种误差主要来源于以下几个方面： 1.分片数据的局部性 Elasticsearch的索引通常被分成多个分片，每个分片独立地计算聚合结果。由于数据在分…...

编程日记 2025/5/9 14:48:55

2-kafka服务端之延时操作实现原理

文章目录背景案例延时生产实现原理延时拉取实现原理总结背景上篇我们说到了kafka时间轮是延时操作内部实现的重要数据结构，这篇我们来说下kafka内部的延时操作实现原理。这里我们以延时生产和延时拉取为例说明延时操作的实现原理。案例延时生产我们知道如…...

编程日记 2025/5/9 15:34:29

UE求职Demo开发日志#22 显示人物信息，完善装备的穿脱

1 创建一个人物信息显示的面板，方便测试简单弄一下： UpdateInfo函数： 就是获取ASC后用属性更新，就不细看了 2 实现思路在操作目标为装备栏，或者操作起点为装备栏时，交换前先判断能否交换（只…...

编程日记 2025/5/9 15:12:19

【DeepSeek论文精读】6. DeepSeek R1：通过强化学习激发大语言模型的推理能力

欢迎关注[【youcans的AGI学习笔记】](https://blog.csdn.net/youcans/category_12244543.html）原创作品【DeepSeek论文精读】1. 从 DeepSeek LLM 到 DeepSeek R1 【DeepSeek论文精读】2. DeepSeek LLM：以长期主义扩展开源语言模型【DeepSeek论文精读】…...

编程日记 2025/5/9 15:05:19

顺丰大数据开发面试题及参考答案

Flink 的提交过程是怎样的？ Flink 的提交过程通常包含以下步骤：代码编写与打包：开发人员首先使用 Flink 提供的 API 编写数据处理逻辑，包括定义数据源、转换操作和数据 sink 等。完成代码编写后，将项目打包成可执行的 JAR 文件，其中包含了所有依赖的库和资源。选择提交方…...

编程日记 2025/5/9 15:15:08

C# 函数多个返回值

有时候需要从C#函数中返回多个返回值，而且返回值的类型又不一样，这个时候又不能用数组或者list。其实C#函数是支持多个不同类型的返回值的，请参看下面的code. //多返回值函数定义 (string name, int age) GetNameAge(int id) {return (&qu…...

编程日记 2025/5/9 14:06:05

Deepseek 接入Word处理对话框（隐藏密钥）

硅基流动邀请码：1zNe93Cp 邀请链接：网页链接亲测deepseek接入word，自由调用对话，看截图有兴趣的复用代码（当然也可以自己向deepseek提问，帮助你完成接入，但是提问逻辑不一样给出的答案是千差万…...

编程日记 2025/5/9 5:56:06

RabbitMQ深度探索：简单实现 MQ

基于多线程队列实现 MQ ： 实现类： public class ThreadMQ {private static LinkedBlockingDeque<JSONObject> broker new LinkedBlockingDeque<JSONObject>();public static void main(String[] args) {//创建生产者线程Thread producer n…...

编程日记 2025/5/9 16:15:16

Baklib赋能数字内容体验个性化推荐提升用户体验的未来之路

内容概要随着数字化时代的不断发展，用户对内容消费的需求日益多样化，个性化推荐成为提升用户体验的重要手段。Baklib以其先进的技术手段，在数字内容领域内积极推动个性化推荐的实施，从而满足用户在信息获取和内容消费中的独特需…...

编程日记 2025/5/9 15:11:29

使用 TensorRT 和 Python 实现高性能图像推理服务器

在现代深度学习和计算机视觉应用中，高性能推理是关键。本文将介绍如何使用 TensorRT 和 Python 构建一个高性能的图像推理服务器。该服务器能够接收客户端发送的图像数据，使用 TensorRT 进行推理，并将结果返回给客户端。 1. 概述 1.1 项目目…...

编程日记 2025/5/9 14:33:49

[MySQL#1] database概述常见的操作指令 MySQL架构存储引擎

#1024程序员节｜征文# 目录一. 数据库概念 0.连接服务器 1. 什么是数据库口语中的数据库为什么数据不直接以文件形式存储，而需要使用数据库呢？ 总结二. ??基础操作三. 主流数据库四. 基础知识服务器，数据库&…...

编程日记 2025/5/5 5:03:46

WebAssembly：前后端开发的未来利器

引言在互联网的世界里，前端和后端开发一直是两块重要的领域。而 JavaScript 长期以来是前端的霸主，后端则有各种语言诸如 Java、Python、Node.js、Go 等等。然而，近年来一个名为 WebAssembly (Wasm) 的技术正在逐渐改变这一格局。它的高性能…...

编程日记 2025/5/9 15:38:12

Spring Task之Cron表达式

🌟 Spring Task高能预警：你以为的Cron表达式可能都是错的！【附实战避坑指南】开篇暴击：为什么你的定时任务总在凌晨3点翻车？ “明明设置了0 0 2 * * ?，为什么任务每天凌晨3点执行？” —— 来…...

编程日记 2025/5/9 15:15:08

deepseek API 调用-python

【1】创建 API keys 【2】安装openai SDK pip3 install openai 【3】代码： https://download.csdn.net/download/notfindjob/90343352...

编程日记 2025/5/9 15:35:30

数字滤波器的分类

数字滤波器可以根据不同的标准进行分类，以下是几种常见的分类方式： 1. 按实现结构分类 FIR滤波器（有限脉冲响应滤波器） - 特点：系统的脉冲响应在有限时间内衰减到零。 - 优点：线性相位特性（保…...

编程日记 2025/5/9 15:15:08

iOS 老项目适配 #Preview 预览功能

前言 iOS 开发者最憋屈的就是UI 布局慢，一直以来没有实时预览功能，虽然swiftUI 早就支持了，但是目前主流还是使用UIKit在布局，iOS 17 苹果推出了 #Preview 可以支持UIKit 实时预览，但是仅仅是 iOS 17，老项目怎么办呢？于是就有了这篇老项目适配 #Preview 预览的文章，…...

编程日记 2025/5/9 14:32:58

高等代数笔记—域与一元多项式

域与环数域 F F F：至少包含两个元素且对加减乘除运算封闭的复数集合 F F F，其中作除运算时除数不为0。封闭：集合 F F F中的两个元素作某一运算的结果仍属于集合 F F F，则称 F F F对该运算封闭。 Q , R , C \mathbb{Q}, \mathbb…...

编程日记 2025/5/9 11:32:40

【C语言设计模式学习笔记1】面向接口编程/简单工厂模式/多态

面向接口编程可以提供更高级的抽象，实现的时候，外部不需要知道内部的具体实现，最简单的是使用简单工厂模式来进行实现，比如一个Sensor具有多种表示形式，这时候可以在给Sensor结构体添加一个enum类型的type，…...

编程日记 2025/5/9 15:43:30

2.Python基础知识：注释、变量以及数据类型、标识符和关键字、输入函数、输出函数、运算符、程序类型转换

1. 注释注释是用来解释代码，增强代码可读性的部分。在 Python 中，注释分为单行注释和多行注释。单行注释：以 # 开头，后面的内容都被视为注释。 # 这是一个单行注释 print("Hello, World!") # 输出 "Hello, Wor…...

编程日记 2025/5/9 14:17:11

介绍10个比较优秀好用的Qt相关的开源库

记录下比较好用的一些开源库 1. Qt中的日志库“log4qt” log4qt 是一个基于 Apache Log4j 设计理念的 Qt 日志记录库，它为 Qt 应用程序提供了强大而灵活的日志记录功能。Log4j 是 Java 领域广泛使用的日志框架，log4qt 借鉴了其优秀的设计思想&#xff…...

编程日记 2025/5/9 14:35:39

利用Muduo库实现简单且健壮的Echo服务器

一、muduo网络库主要提供了两个类： TcpServer：用于编写服务器程序 TcpClient：用于编写客户端程序二、三个重要的链接库： libmuduo_net、libmuduo_base、libpthread 三、muduo库底层就是epoll线程池，其好处是…...

编程日记 2025/5/9 13:26:36

渗透测试之文件包含漏洞超详细的文件包含漏洞文章

目录说明通常分为两种类型： 本地文件包含典型的攻击方式1： 影响： 典型的攻击方式2： 包含路径解释： 日志包含漏洞： 操作原理包含漏洞读取文件文件包含漏洞远程代码执行漏洞: 远程文件包含…...

编程日记 2025/5/9 15:29:24

高性能：DeepSeek-V3 inference 推理时反量化实现 fp8_cast_bf16

FP8 (8 bits) & FP16 (16 bits) FP8 和 BF16 都是浮点数格式（floating-point formats），float通过科学计数法表示数据，float [符号位指数位系数位] FP8 (8 bits)：SEEEMMMMFP16 (16 bits)：SEEEEEMMMMM…...

编程日记 2025/5/9 15:48:22

kakailio官网推荐的安装流程ubuntu 22.04

https://kamailio.org/docs/tutorials/6.0.x/kamailio-install-guide-git/ # 非必须项 wget -O- https://deb.kamailio.org/kamailiodebkey.gpg | gpg --dearmor | sudo tee /usr/share/keyrings/kamailio.gpg在/etc/apt/sources.list文件追加以下内容 deb [signed-by/usr/sh…...

编程日记 2025/5/9 14:21:40

过渡

基本使用

缓动效果

动画

相关文章：