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

5000 字总结CSS 中的过渡、动画和变换详解

news 来源：原创 2025/8/7 11:19:24

CSS 中的过渡、动画和变换详解

一、CSS 过渡（Transitions）

1. 基本概念

CSS 过渡是一种平滑改变 CSS 属性值的机制，允许属性值在一定时间内从一个值逐渐变化到另一个值，从而创建流畅的动画效果。过渡只能用于具有中间值的属性（如颜色、大小、位置等），不能用于 display 等离散属性。

2. 核心属性

transition-property

指定哪些 CSS 属性参与过渡。可以是单个属性（如width）、多个属性（如width, height）或all（所有可过渡属性）。

.element {transition-property: width, height;
}

transition-duration

指定过渡持续的时间，单位可以是秒（s）或毫秒（ms）。

.element {transition-duration: 0.5s; /* 0.5秒 */
}

transition-timing-function

定义过渡的速度曲线，常见值包括：

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

.element {transition-timing-function: ease-in-out;
}

transition-delay

指定过渡开始前的延迟时间。

.element {transition-delay: 0.2s; /* 延迟0.2秒 */
}

3. 简写语法

.element {transition: width 0.5s ease-in-out 0.2s;/* 依次为：属性 持续时间 时间函数 延迟时间 */
}

4. 触发方式

过渡需要一个触发条件才能生效，常见的触发方式有：

:hover 伪类

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

:focus 伪类

.input {border: 1px solid #ccc;transition: border-color 0.3s;
}.input:focus {border-color: blue;
}

JavaScript 动态修改

<button id="changeColor">变色</button>
<div id="box" style="width: 100px; height: 100px; background-color: red; transition: background-color 0.5s;"></div><script>document.getElementById('changeColor').addEventListener('click', () => {const box = document.getElementById('box');box.style.backgroundColor = box.style.backgroundColor === 'red' ? 'blue' : 'red';});
</script>

5. 应用场景

按钮悬停效果
导航栏交互
表单元素状态变化
图片缩放预览

二、CSS 动画（Animations）

1. 基本概念

CSS 动画通过 @keyframes 规则定义一系列关键帧，然后将这些关键帧应用到元素上，实现更复杂、更可控的动画效果。与过渡不同，动画不需要触发条件，可以自动运行。

2. @keyframes 规则

定义动画的关键帧，格式如下：

@keyframes animationName {0% { /* 初始状态 */ }50% { /* 中间状态 */ }100% { /* 结束状态 */ }
}

也可以使用 from 和 to 表示 0% 和 100%：

@keyframes fadeIn {from { opacity: 0; }to { opacity: 1; }
}

3. 动画属性

animation-name

指定要应用的动画名称，对应 @keyframes 定义的名称。

.element {animation-name: fadeIn;
}

animation-duration

指定动画的持续时间，单位为秒（s）或毫秒（ms）。

.element {animation-duration: 2s;
}

animation-timing-function

定义动画的速度曲线，与过渡的 timing-function 类似。

.element {animation-timing-function: ease-in-out;
}

animation-delay

指定动画开始前的延迟时间。

.element {animation-delay: 0.5s;
}

animation-iteration-count

指定动画的播放次数，可以是数字或 infinite（无限循环）。

.element {animation-iteration-count: 3; /* 播放3次 */
}

animation-direction

指定动画的播放方向，常见值包括：

normal：默认值，正向播放
reverse：反向播放
alternate：正向和反向交替播放
alternate-reverse：反向和正向交替播放

.element {animation-direction: alternate;
}

animation-fill-mode

定义动画在播放前和播放后的状态，常见值包括：

none：默认值，不应用任何样式
forwards：保持动画结束时的状态
backwards：在延迟期间应用动画的初始状态
both：同时应用 forwards 和 backwards

.element {animation-fill-mode: forwards;
}

animation-play-state

控制动画的播放状态，可以是 running 或 paused。

.element {animation-play-state: paused;
}

4. 简写语法

.element {animation: fadeIn 2s ease-in-out 0.5s 3 alternate forwards;/* 依次为：名称 持续时间 时间函数 延迟时间 播放次数 播放方向 填充模式 */
}

5. 应用场景

加载动画
通知提示效果
页面滚动动画
互动游戏元素

三、CSS 变换（Transforms）

1. 基本概念

CSS 变换允许改变元素的形状、大小和位置，而不影响文档流。变换可以是 2D 或 3D 的，通过 transform 属性实现。

2. 2D 变换

translate()

移动元素的位置，参数为 X 和 Y 方向的偏移量。

.element {transform: translate(50px, 20px); /* 向右移动50px，向下移动20px */
}

rotate()

旋转元素，参数为旋转角度（单位为 deg）。

.element {transform: rotate(45deg); /* 顺时针旋转45度 */
}

scale()

缩放元素，参数为 X 和 Y 方向的缩放比例。

.element {transform: scale(1.5, 0.8); /* 水平放大1.5倍，垂直缩小0.8倍 */
}

skew()

倾斜元素，参数为 X 和 Y 方向的倾斜角度。

.element {transform: skew(20deg, 10deg); /* 水平倾斜20度，垂直倾斜10度 */
}

matrix()

使用矩阵方式定义变换，包含六个参数：matrix(a, b, c, d, e, f)。

.element {transform: matrix(1.1, 0, 0, 1.1, 50, 0); /* 相当于 scale(1.1) translate(50px, 0) */
}

3. 3D 变换

translate3d()

在 3D 空间中移动元素，参数为 X、Y、Z 方向的偏移量。

.element {transform: translate3d(50px, 20px, 100px);
}

rotate3d()

在 3D 空间中旋转元素，参数为 (x, y, z, angle)，其中 x、y、z 定义旋转轴。

.element {transform: rotate3d(1, 1, 0, 45deg); /* 绕X轴和Y轴的对角线旋转45度 */
}

scale3d()

在 3D 空间中缩放元素，参数为 X、Y、Z 方向的缩放比例。

.element {transform: scale3d(1.5, 0.8, 2);
}

perspective()

设置透视效果，定义观察者与 z=0 平面的距离。

.container {perspective: 1000px;
}.element {transform: perspective(1000px) rotateY(45deg);
}

transform-style

指定子元素是否保留 3D 变换效果，值为 flat（默认）或 preserve-3d。

.container {transform-style: preserve-3d;
}

backface-visibility

控制元素背面是否可见，值为 visible（默认）或 hidden。

.card {backface-visibility: hidden;
}

4. 变换原点

transform-origin 属性允许改变变换的原点位置，默认值为元素中心 (50% 50%)。

.element {transform-origin: top left; /* 变换原点为左上角 */transform: rotate(45deg);
}

四、综合应用

1. 过渡与变换结合

.button {background-color: blue;color: white;padding: 10px 20px;border: none;transition: background-color 0.3s, transform 0.3s;
}.button:hover {background-color: red;transform: scale(1.1);
}

2. 动画与变换结合

@keyframes bounce {0%, 100% { transform: translateY(0); }50% { transform: translateY(-20px); }
}.ball {width: 50px;height: 50px;background-color: red;border-radius: 50%;animation: bounce 1s infinite;
}

3. 3D 卡片翻转效果

.card {width: 200px;height: 200px;perspective: 1000px;position: relative;
}.card-inner {width: 100%;height: 100%;transition: transform 0.8s;transform-style: preserve-3d;
}.card:hover .card-inner {transform: rotateY(180deg);
}.card-front, .card-back {position: absolute;width: 100%;height: 100%;backface-visibility: hidden;
}.card-front {background-color: #bbb;color: black;
}.card-back {background-color: dodgerblue;color: white;transform: rotateY(180deg);
}

五、性能优化

1. 使用 transform 和 opacity

transform 和 opacity 是性能最高的 CSS 属性，因为它们不会触发重排（reflow）和重绘（repaint），只会触发合成（composite）。

2. 避免过多重排和重绘

频繁修改会触发重排和重绘的属性（如 width、height、margin 等）会导致性能问题。尽量批量修改样式，或者使用 transform 替代位置和大小的改变。

3. 使用 will-change

提前告知浏览器某个元素即将发生变化，有助于浏览器提前优化。

.element {will-change: transform;
}

4. 硬件加速

通过 transform: translateZ(0) 或 transform: translate3d(0,0,0) 触发硬件加速。

.element {transform: translateZ(0);
}

六、浏览器兼容性

1. 前缀问题

早期的浏览器需要添加前缀支持，现在大多数现代浏览器已经不需要了，但为了兼容性，仍然可以添加：

.element {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;
}

2. 浏览器支持情况

过渡和 2D 变换：IE10+、Chrome、Firefox、Safari、Edge 等现代浏览器均支持
3D 变换：IE10+、Chrome、Firefox、Safari、Edge 等现代浏览器均支持
动画：IE10+、Chrome、Firefox、Safari、Edge 等现代浏览器均支持

七、常见应用场景

1. 悬停效果

按钮缩放
图片放大
导航项高亮

2. 加载动画

旋转加载图标
脉冲效果
骨架屏

3. 交互反馈

表单验证动画
点击波纹效果
拖放反馈

4. 页面过渡

路由切换动画
模态框淡入淡出
滚动视差效果

八、注意事项

1. 性能陷阱

过度使用复杂的动画和变换会导致性能下降，特别是在移动设备上。

2. 无障碍性

确保动画和变换不会影响视力障碍用户的体验，避免闪烁效果（可能引发癫痫）。

3. 兼容性处理

对于不支持某些特性的浏览器，提供降级方案。

4. 代码维护

避免过多的动画和变换导致代码难以维护，保持简洁和一致性。

通过合理使用 CSS 过渡、动画和变换，可以创建出视觉上引人入胜、交互上流畅自然的现代 Web 应用。这些技术不仅提升了用户体验，也为设计师和开发者提供了丰富的创意空间。

5000 字总结CSS 中的过渡、动画和变换详解

CSS 中的过渡、动画和变换详解一、CSS 过渡（Transitions） 1. 基本概念 CSS 过渡是一种平滑改变 CSS 属性值的机制，允许属性值在一定时间内从一个值逐渐变化到另一个值，从而创建流畅的动画效果。过渡只能用于具有中间值的属性&…...

编程日记 2025/8/7 11:19:24

2025年渗透测试面试题总结-安恒[实习]安全工程师（题目+回答）

网络安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。目录安恒[实习]安全工程师一面 1. 自我介绍 2. 前两段实习做了些什么 3. 中等难度的算法题 4. Java的C…...

编程日记 2025/8/3 21:23:42

WebXR教学 09 项目7 使用python从0搭建一个简易个人博客

WebXR教学 09 项目7 使用python从0搭建一个简易个人博客（1） 前期设计规划功能呈现个人博客文章技术选型 HTMLCSSJSPythonFlask 环境准备 VS Code Python3.8 代码实现包 # 创建虚拟环境（-m 会先将模块所在路径加入 sys.path,更适…...

编程日记 2025/8/6 22:50:09

c++从入门到精通（五）--异常处理，命名空间，多继承与虚继承

异常处理栈展开过程： 栈展开过程沿着嵌套函数的调用链不断查找，直到找到了与异常匹配的catch子句为止；也可能一直没找到匹配的catch，则退出主函数后查找过程终止。栈展开过程中的对象被自动销毁。在栈展开的过程中&#xff0c…...

编程日记 2025/8/7 11:19:23

开源安全大模型Foundation-Sec-8B实操

一、兴奋时刻此时此刻，晚上22点55分，从今天早上6点左右开始折腾，花费了接近10刀的环境使用费，1天的休息时间，总算是把Foundation-Sec-8B模型跑起来了，中间有两次胜利就在眼前，但却总在远程端口转发环节出问题，让人难受。直到晚上远程Jupyter访问成功那一刻，眉开眼笑，…...

编程日记 2025/8/3 21:59:12

现代优化算法全解析：禁忌搜索算法、模拟退火算法、遗传算法、蚁群优化算法、人工神经网络

现代优化算法全解析：禁忌搜索算法、模拟退火算法、遗传算法、蚁群优化算法、人工神经网络引言：为什么需要优化算法？ 在当今这个数据驱动的时代，优化算法已成为计算机科学、工程设计、人工智能等领域的核心工具。无论是训练神经…...

编程日记 2025/8/3 22:49:31

Docker常见命令解读

上图是对docker常见命令的一个图解，方便大家理解，下面，我将对这些命令做一些解释。一、镜像生命周期管理 1. 镜像构建（Build） docker build -t my-image . # 根据Dockerfile构建镜像 Dockerfile：…...

编程日记 2025/8/6 18:56:25

为什么 Docker 建议关闭 Swap

在使用 Docker 时，关闭系统 Swap（交换分区） 是一个常见的推荐做法，尤其是在生产环境中。虽然 Docker 不强制要求禁用 Swap，但出于性能、稳定性、可控性和资源管理的目的，通常建议这样做。为什么 Docker 建…...

编程日记 2025/8/3 22:56:05

TIFS2024 | CRFA | 基于关键区域特征攻击提升对抗样本迁移性

Improving Transferability of Adversarial Samples via Critical Region-Oriented Feature-Level Attack 摘要-Abstract引言-Introduction相关工作-Related Work提出的方法-Proposed Method问题分析-Problem Analysis扰动注意力感知加权-Perturbation Attention-Aware Weighti…...

编程日记 2025/8/6 5:05:52

WPS PPT设置默认文本框

被一个模板折磨了好久，每次输入文本框都是很丑的24号粗体还有行标，非常恶心，我甚至不知道如何描述自己的问题，非常憋屈，后来终于知道怎么修改文本框了。这种软件操作问题甚至不知道如何描述问题本身，非常烦…...

编程日记 2025/8/6 10:45:20

支持selenium的chrome driver更新到136.0.7103.94

最近chrome释放新版本：136.0.7103.94 如果运行selenium自动化测试出现以下问题，是需要升级chromedriver才可以解决的。 selenium.common.exceptions.SessionNotCreatedException: Message: session not created: This version of ChromeDriver only su…...

编程日记 2025/8/2 13:35:33

“下一辆车还买小米”

大家好，我是小悟。就在5月13日，江西上饶德兴街头，一辆紫色小米SU7 Max停在路边，却遭遇了一场堪比灾难片的意外。一辆满载货物的大货车因手刹故障溜坡，径直撞向SU7，两车从两米高的落差坠落，货…...

编程日记 2025/8/3 19:00:44

opencv4.11生成ArUco标记 ArUco Marker

从opencv4.7开始aruco有了一些变化以下是opencv4.11生成ArUco标记的小例子 #include <iostream> #include <opencv2/opencv.hpp> #include <opencv2/objdetect/aruco_detector.hpp>int main() {cv::Mat markerImage;cv::aruco::Dictionary dictionary cv…...

编程日记 2025/8/3 16:20:16

从辅助到协作：GitHub Copilot的进化之路

如果说现代程序员的标配工具除了VS Code、Stack Overflow之外，还有谁能入选，那一定是GitHub Copilot。从2021年首次亮相，到如今深度集成进开发者日常流程，这个“AI编程助手”已经不只是写几行自动补全代码的小帮手了，而…...

编程日记 2025/8/7 5:30:28

QMK 宏（Macros）功能详解（实战部分）

QMK 宏（Macros）功能详解（实战部分）一、宏的基本概念与作用宏（Macros）是 QMK 固件中一项强大的功能，它允许您在按下单个按键时执行多个按键操作。通过宏，您可以：输入常用短语或文本执行复杂的按键组合自动化重复性操作触发系统功能或快捷键🔔 安全提示：虽然可以…...

编程日记 2025/8/4 4:48:54

SVN 版本控制入门指南

SVN 版本控制系统详细入门指南一、SVN 基础概念详解 1. 什么是版本控制？ 版本控制是一种记录文件变化的系统，可以： 追踪文件的修改历史查看每次修改的内容恢复到任意历史版本协调多人协作开发 2. SVN 核心概念 2.1 仓库（Re…...

编程日记 2025/8/2 13:52:58

6to4、6over4的类比解释

本文由deepseek生成，特此声明 1. 6to4：自动的“快递中转站” 类比场景： 假设你住在一个偏远的小镇（IPv6网络），周围被大海（IPv4互联网）包围，你想给另一个偏远小镇&#…...

编程日记 2025/8/2 13:23:00

跨国应用程序的数据存储方案常见的解决方案

一、数据隐私与合规性跨国数据存储方案必须遵守不同国家和地区的数据隐私法律和规定，例如： GDPR（欧盟一般数据保护条例）CCPA（加利福尼亚消费者隐私法案）各国的本地数据存储法规解决方案：采用本地化存储：在不同国家或地区设立数据存储中心，以遵循当地的法律和隐私要…...

编程日记 2025/8/3 15:32:02

JSP链接MySQL8.0（Eclipse+Tomcat9.0+MySQL8.0）

所用环境 Eclipse Tomcat9.0 MySQL8.0.21(下载：MySQL Community Server 8.0.21 官方镜像源下载 | Renwole） mysql-connector-java-8.0.21（下载：MySQL :: Begin Your Download） .NET Framework 4.5.2（下…...

编程日记 2025/8/2 23:26:36

基于KAN+Transformer的专业领域建模方法论

一、专业领域KAN方法创新路径 1. 领域函数分解策略数学建模：针对专业领域特性设计专用基函数组合医学影像：采用小波变换基函数分解图像特征 class WaveletKAN(nn.Module): def __init__(self): self.wavelet_basis nn.Par…...

编程日记 2025/8/2 17:08:36

Go语言 Gin框架使用指南

Gin 是一个用 Go (Golang) 编写的 Web 框架。它具有类似 martini 的 API，性能要好得多，多亏了 httprouter，速度提高了 40 倍。如果您需要性能和良好的生产力，您一定会喜欢 Gin。Gin 相比于 Iris 和 Beego 而言，更倾向…...

编程日记 2025/8/1 17:58:33

内容安全：使用开源框架Caffe实现上传图片进行敏感内容识别

上传图片进行敏感内容识别预览效果环境准备 Ubuntu 16.04python 2.7.12caffe 1.0.0 安装调试环境: sudo apt-get update sudo apt-get install -y --no-install-recommends build-essential cmake git wget libatlas-base-dev libboost-all-dev libgflags-dev sudo apt-g…...

编程日记 2025/8/2 17:08:36

缓慢变化维度（SCD）策略

缓慢变化维度（SCD）策略缓慢变化维度（SCD）策略是数据仓库中处理维度属性随时间变化的核心技术，根据业务需求的不同，主要分为以下类型： 1. SCD Type 0（固定维度） 定义&a…...

编程日记 2025/8/5 11:56:28

【Mysql】详解InnoDB存储引擎以及binlog，redelog，undolog+MVCC

1.InnoDB存储引擎在Mysql中，InnoDB存储引擎是默认的，也是我们最常用的一个存储引擎，其中分为内存结构和磁盘结构两大部分，整体架构图如下： 1.1Buffer Pool Buffer pool(缓存区)是Mysql内存的一个主要区域&#xff0…...

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

面向对象详解和JVM底层内存分析

神速熟悉面向对象表格结构和类结构我们在现实生活中，思考问题、发现问题、处理问题，往往都会用“表格”作为工具。实际上，“表格思维”就是一种典型的面向对象思维。实际上，互联网上所有的数据本质上都是“表格”。我们在这里…...

编程日记 2025/8/5 11:29:03

C语言指针深入详解（一）：内存和地址、指针变量和地址、指针变量类型的意义、指针运算

目录一、内存和地址 （一）内存 （二）如何理解编址二、指针变量和地址 （一）取地址操作符（&） （二）指针变量和解引用操作符（*）…...

编程日记 2025/8/7 9:01:49

MATLAB中进行深度学习网络训练的模型评估步骤

文章目录前言环境配置一、基础性能评估二、高级评估指标三、模型解释与可视化四、交叉验证与模型选择五、部署前的优化前言在 MATLAB 中进行深度学习网络训练后的模型评估是确保模型性能和可靠性的关键环节。以下是详细的评估步骤和方法。环境配置 MATLAB下载安装教程&…...

编程日记 2025/8/4 1:51:03

30、WebAssembly：古代魔法——React 19 性能优化

一、符文编译术（编译优化） 1. 语言选择与量子精简 // Rust编译优化 cargo build --target wasm32-wasi --release 魔法特性： • 选择低运行时开销语言（如Rust/C），编译后文件比Swift小4倍 • --rel…...

编程日记 2025/8/6 8:10:54

Python集合运算：从基础到进阶全解析

Python基础：集合运算进阶文章目录 Python基础：集合运算进阶一、知识点详解1.1 集合运算（运算符 vs 方法）1.2 集合运算符优先级1.3 集合关系判断方法1.4 方法对比二、说明示例2.1 权限管理系统2.2 数据去重与差异分析2.3 数学运算…...

编程日记 2025/8/3 18:55:12

【开源Agent框架】Suna架构设计深度解析与应用实践

一、项目基本介绍 Suna是一款全栈开源的通用型AI代理系统，其名称源自日语"砂"的发音，寓意如流沙般渗透到各类数字任务中。项目采用Apache 2.0协议，由Kortix AI团队维护，核心开发者包括Adam Cohen Hillel等三位主要贡献者。技术架构全景系统由四大核心组件构…...

编程日记 2025/8/4 20:20:18

C++类与对象--2 对象的初始化和清理

C面向对象来源于生活，每个对象都有初始化设置和销毁前的清理数据的设置。 2.1 构造函数和析构函数 （1）构造函数初始化对象的成员属性不提供构造函数时，编译器会提供不带参数的默认构造函数，函数实现是空的构造函数不…...

编程日记 2025/8/4 1:34:42

计网| 网际控制报文协议（ICMP）

目录网际控制报文协议（ICMP） 一、ICMP 基础特性二、ICMP 报文分类及作用差错报告报文询问报文网际控制报文协议（ICMP） ICMP（Internet Control Message Protocol，网际控制报文协议）是 …...

编程日记 2025/7/31 15:01:20

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言在人工智能技术飞速发展的今天，深度学习与大模型技术已成为推动行业变革的核心驱动力，而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心，系统性地呈现了两部深度技术著作的精华：…...

编程日记 2025/8/5 14:33:21

printf耗时高的原因

背景：设备升级初始化失败。具体表现为：app在启动dsp后，需在15秒内与其建立连接以确认通信成功，但当前未能在此时间限制内完成连接。排查过程：通过在初始化过程中添加耗时打印，发现各阶段耗时虽不高&#…...

编程日记 2025/8/2 13:15:19

20250517 我设想一个空间，无限大，空间不与其中物质进行任何作用，甚至这个空间能容纳可以伸缩的空间

1.我设想一个空间，无限大，空间不与其中物质进行任何作用，甚至这个空间能容纳可以伸缩的空间您设想的这个空间具有一些有趣的特点： 无限大：空间本身没有边界或限制，理论上可以容纳无限多的物质或结构。非…...

编程日记 2025/8/4 10:44:37

GO语言学习（二）

GO语言学习（二） method（方法） 这一节我们介绍一下GO语言的面向对象，之前我们学习了struct结构体，现在我们来解释一下方法method主要是为了简化代码，在计算同类时，使用函数接收方法…...

编程日记 2025/8/5 14:17:28

神经网络与深度学习第六章--循环神经网络（理论）

#第六章-循环神经网络前馈神经网络的缺点： ①信息的传递是单向的。前馈神经网络可以看作一个复杂的函数，每次的输入都是独立的，即网络的输出只依赖于当前的输入。前馈神经网络是一种静态网络，没有记忆能力，就无法模拟…...

编程日记 2025/8/6 15:17:41

第三十五节：特征检测与描述-ORB 特征

1. 引言：为什么需要ORB？在计算机视觉领域，特征检测与描述是许多任务（如图像匹配、目标跟踪、三维重建等）的核心基础。传统的算法如SIFT（尺度不变特征变换）和SURF（加速稳健特征）因其优异的性能被广泛应用，但它们存在两个显著问题：专利限制：SIFT和SURF受专利保护，…...

编程日记 2025/8/6 11:58:04

重庆 ICPC 比赛游记

2025.5.9 比赛前一天晚上，激动地睡不着觉，起来收拾了好多东西。（其实就四本书，剩下的全是零食……关键在于这四本书基本没用。） 2025.5.10 学校丧心病狂的让我们 6:20 到校门口集合坐车（据说是怕赶不上比…...

编程日记 2025/8/6 22:49:47

二进制与十进制互转的方法

附言: 在计算机科学和数字系统中，二进制和十进制是最常见的两种数制。二进制是计算机内部数据存储和处理的基础，而十进制则是我们日常生活中最常用的数制。因此，掌握二进制与十进制之间的转换方法对于计算机学习者和相关领域的从业者来说至关…...

编程日记 2025/8/1 22:37:50

咖啡叶子病害检测数据集VOC+YOLO格式1468张4类别均为单叶子

数据集格式：Pascal VOC格式YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：1468 标注数量(xml文件个数)：1468 标注数量(txt文件个数)：1468 …...

编程日记 2025/8/5 8:06:48

JDBC实现模糊、动态与分页查询的详解

文章目录一. 模糊查询1. Mysql的写法2. JDBC的实现二. 动态条件查询1. 创建生成动态条件查询sql的方法2. 完整的动态条件查询类以及测试类三. 分页查询1. 什么是分页查询？2. 分页查询的分类3. MySQL的实现4. JDBC实现4.1. 创建page页4.2. 分页的实现本章来讲一下…...

编程日记 2025/8/6 12:42:48

golang读、写、复制、创建目录、删除、重命名，文件方法总结

文章目录一、只读文件二、写入文件三、复制文件四、创建目录五、删除目录/文件五、重命名文件一、只读文件 file, err : os.Open("./main.go")defer file.Close() //打开文件一定要关闭关闭文件if err ! nil {fmt.Println("文件打开失败", err)}/*方案一…...

编程日记 2025/8/5 8:27:54

信贷域——互联网金融业务

摘要本文深入探讨了信贷域全托与半托业务的定义、特点、适用场景及注意事项，并分析了互联网金融核心信息流的多个方面，包括资金流、信息流、风险流、合规流、物流、技术流和商流，还阐述了金融系统“断直连”业务的相关内容，以及…...

编程日记 2025/8/2 17:08:32

计算机操作系统概要

不谋万世者，不⾜谋⼀时。不谋全局者 ，足谋⼀域。 ——陈澹然《寤⾔》《迁都建藩议》操作系统一.对文件简单操作的常用基础指令 ls ls 选项目录或⽂件名:罗列当前⽬录下的⽂件 -l：以长格式显示⽂件和⽬录的详细信息 -a 或 --all&…...

编程日记 2025/8/6 12:06:05

gRPC开发指南：Visual Studio 2022 + Vcpkg + Windows全流程配置

前言 gRPC作为Google开源的高性能RPC框架，在微服务架构中扮演着重要角色。本文将详细介绍在Windows平台下，使用Visual Studio 2022和Vcpkg进行gRPC开发的完整流程，包括环境配置、项目搭建、常见问题解决等实用内容。环境准备 1. 安装必要组…...

编程日记 2025/8/2 16:43:02

MATLAB安装常见问题及解决办法

MATLAB安装失败安装MATLAB时可能会遇到失败的情况，通常是由于系统环境不兼容或安装文件损坏。确保系统满足MATLAB的最低要求，并重新下载安装文件。如果问题仍然存在，可以尝试以管理员身份运行安装程序。许可证激活问题在激活MATLAB许可证时，可能会遇到激活失败或无法…...

编程日记 2025/8/1 1:57:59

英语学习5.17

attract 👉 前缀：at-（朝向） 👉 含义：吸引（朝某处拉） 例句：The flowers attract bees. （花吸引蜜蜂。） distract 👉 前缀&#xff…...

编程日记 2025/8/5 17:51:21

深入解析 React 的 useEffect：从入门到实战

文章目录前言一、为什么需要 useEffect？核心作用： 二、useEffect 的基础用法1. 基本语法2. 依赖项数组的作用三、依赖项数组演示1. 空数组 []：2.无依赖项（空）3.有依赖项四、清理副作用函数实战案例演示1. 清除定时器…...

编程日记 2025/7/31 13:26:06

Scrapy进阶实践指南：从脚本运行到分布式爬取

Scrapy作为Python生态中最强大的爬虫框架之一，其官方文档的"Common Practices"章节总结了多个高频使用场景的解决方案。本文将深入解析如何通过脚本控制爬虫、多爬虫协同工作、分布式部署策略以及反反爬技巧，帮助开发者突破基础使用限制。一…...

编程日记 2025/8/6 7:12:10

CSS 中的过渡、动画和变换详解

一、CSS 过渡（Transitions）

1. 基本概念

2. 核心属性

transition-property

transition-duration

transition-timing-function

transition-delay

3. 简写语法

4. 触发方式

:hover 伪类

:focus 伪类

JavaScript 动态修改

5. 应用场景

二、CSS 动画（Animations）

1. 基本概念

2. @keyframes 规则

3. 动画属性

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-fill-mode

animation-play-state

4. 简写语法

5. 应用场景

三、CSS 变换（Transforms）

1. 基本概念

2. 2D 变换

translate()

rotate()

scale()

skew()

matrix()

3. 3D 变换

translate3d()

rotate3d()

scale3d()

perspective()

transform-style

backface-visibility

4. 变换原点

四、综合应用

1. 过渡与变换结合

2. 动画与变换结合

3. 3D 卡片翻转效果

五、性能优化

1. 使用 transform 和 opacity

2. 避免过多重排和重绘

3. 使用 will-change

4. 硬件加速

六、浏览器兼容性

1. 前缀问题

2. 浏览器支持情况

七、常见应用场景

1. 悬停效果

2. 加载动画

3. 交互反馈

4. 页面过渡

八、注意事项

1. 性能陷阱

2. 无障碍性

3. 兼容性处理

4. 代码维护

相关文章：