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

CSS中的transition与渐变

news 来源：原创 2025/8/4 12:15:43

一、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>

CSS中的transition与渐变

目录一、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 动态移…...

编程日记 2025/8/4 12:15:43

AI + 医疗 Qwq大模型离线本地应用

通义千问Qwq-32b-FP16可用于社区医院、乡镇卫生院、诊所等小型医疗机构，替代专业合理用药系统，作为药品知识库，实现以下功能： 药品信息智能查询：检索药品的详细说明书、适应症、禁忌症、不良反应及药物相互作用等关键信…...

编程日记 2025/8/4 12:13:54

大数据环境搭建

目录一：虚拟机:VirtualBox 二：Shell工具:MobaXterm 三：安装脚本四：JDK和Hadoop 4.1：安装 4.2：启动 4.3：Hadoop可视化访问 4.4：关机一：虚拟机:VirtualBox Virt…...

编程日记 2025/7/27 9:26:36

七天免登录为什么不能用seesion，客户端的http请求自动携带cookei的机制（比较重要）涉及HTTP规范

如果是七天免登录,和session肯定没关系,因为session不能持久化,主要是客户端一旦关闭,seesion就失效了/// 所以必须是能持久化的，这就清晰了，要莫在的服务器保存，要摸在客户端设置 cook机制 1. 使用Cookie实现七天免登录前端（登…...

编程日记 2025/7/31 1:32:06

从PGC到AIGC：海螺AI多模态内容生成系统的技术革命

一、内容生产的范式迁移：从PGC到AIGC的进化之路在数字内容生产的历史长河中，人类经历了三次重大范式转变：专业生成内容（PGC）的工业化生产、用户生成内容（UGC）的全民创作浪潮，以及当…...

编程日记 2025/8/4 12:13:52

常考计算机操作系统面试习题（三上）

目录 1. 为何要引入与设备的无关性？如何实现设备的独立性？ 2. 页面置换先进先出算法 3. 页面置换先进先出算法，4个页框 4. 进程优先级调度算法 5. 短作业优先调度策略 6. 平均内存访问时间计算 7. 页式存储和段式存储的物理地址计算 …...

编程日记 2025/8/3 15:20:28

数据结构之双向链表-初始化链表-头插法-遍历链表-获取尾部结点-尾插法-指定位置插入-删除节点-释放链表——完整代码

数据结构之双向链表-初始化链表-头插法-遍历链表-获取尾部结点-尾插法-指定位置插入-删除节点-释放链表——完整代码 #include <stdio.h> #include <stdlib.h>typedef int ElemType;typedef struct node{ElemType data;struct node *next, *prev; }Node;//初化链表…...

编程日记 2025/8/4 12:12:58

一键部署 GPU Kind 集群，体验 vLLM 极速推理

随着 Kubernetes 在大模型训练和推理领域的广泛应用，越来越多的开发者需要在本地环境中搭建支持 GPU 的 Kubernetes 集群，以便进行测试和开发。大家都知道，本地搭建 Kubernetes 集群通常可以使用 Kind（Kubernetes IN Docker&#…...

编程日记 2025/8/4 12:13:26

C/C++蓝桥杯算法真题打卡（Day6）

一、P8615 [蓝桥杯 2014 国 C] 拼接平方数 - 洛谷方法一：算法代码（字符串分割法） #include<bits/stdc.h> // 包含标准库中的所有头文件，方便编程 using namespace std; // 使用标准命名空间，避免每次调用…...

编程日记 2025/8/4 12:03:15

【C++】入门

1.命名空间 1.1 namespace的价值在C/C中，变量，函数和后面要学到的类都是大量存在的，这些变量，函数和类的名称将存在于全局作用域中，可能会导致很多冲突。使用命名空间的目的是对标识符的名称进行本地化，…...

编程日记 2025/8/2 13:41:17

CUDA 学习(2)——CUDA 介绍

GeForce 256 是英伟达 1999 年开发的第一个 GPU，最初用作显示器上渲染高端图形，只用于像素计算。在早期，OpenGL 和 DirectX 等图形 API 是与 GPU 唯一的交互方式。后来，人们意识到 GPU 除了用于渲染图形图像外，还可以…...

编程日记 2025/8/4 12:04:57

构建自定义MCP天气服务器：集成Claude for Desktop与实时天气数据

构建自定义MCP天气服务器：集成Claude for Desktop与实时天气数据概述本文将指导开发者构建一个MCP（Model Control Protocol）天气服务器，通过暴露get-alerts和get-forecast工具，为Claude for Desktop等客户端提供实时天气数据支持。该方案解决了传统LLM无法直接获取天气…...

编程日记 2025/8/3 11:08:50

[Lc_2 二叉树dfs] 布尔二叉树的值 | 根节点到叶节点数字之和 | 二叉树剪枝

目录 1.计算布尔二叉树的值题解 2.求根节点到叶节点数字之和 3. 二叉树剪枝题解 1.计算布尔二叉树的值链接：2331. 计算布尔二叉树的值给你一棵完整二叉树的根，这棵树有以下特征： 叶子节点要么值为 0 要么值为 1 ，其…...

编程日记 2025/7/30 4:43:37

搜广推校招面经五十六

字节推荐算法一、Attention的复杂度是多少？ 见【搜广推校招面经三十八】二、如何对普适性强的物品（如新华字典）设计指标进行降权 2.1. 问题背景普适性强的物品（如新华字典）在推荐系统或搜索排序中可能频繁出现…...

编程日记 2025/8/4 12:15:42

ZYNQ的cache原理与一致性操作

在Xilinx Zynq SoC中，Cache管理是确保处理器与外部设备（如FPGA逻辑、DMA控制器）之间数据一致性的关键。Zynq的ARM Cortex-A9处理器包含L1 Cache（指令/数据）和L2 Cache，其刷新（Flush/Invalidate&…...

编程日记 2025/8/4 12:10:57

安装React开发者工具

我们在说组件之前，需要先安装一下React官方推出的开发者工具，首先我们分享在线安装方式首先打开谷歌网上应用商店(针对谷歌浏览器)，在输入框内搜索react，安装如下插件： 注意安装提供方为Facebook的插件，这…...

编程日记 2025/7/27 17:08:21

多层感知机

多层感知机（Multilayer Perceptron，简称 MLP）是一种基于前馈神经网络（Feedforward Neural Network）的深度学习模型，由多个神经元层组成，每一层与前一层全连接。它包括至少一个隐藏层&#xff08…...

编程日记 2025/8/4 12:15:39

2025年渗透测试面试题总结- PingCAP安全工程师（题目+回答）

网络安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。目录 PingCAP安全工程师一、SQL注入判断数据库类型技术分析 1. 常规判断方法 2. 盲注场景下的判断 3. 补…...

编程日记 2025/8/4 12:10:36

CAD模型导入Geant4

CADMesh是一个开源项目，专门用于将STL格式的CAD模型导入Geant4。以下是使用CADMesh操作STL模型的步骤： 准备工作下载CADMesh开源代码：可以从GitHub或Gitee下载CADMesh的开源代码。将CAD模型转换为STL格式：在CAD软件中创建几何…...

编程日记 2025/8/3 10:43:02

DeepSORT 目标追踪算法详解

DeepSORT（Deep Simple Online and Realtime Tracking）是多目标追踪（MOT） 领域的经典算法，通过结合目标检测、运动预测和外观特征匹配，实现了高效、稳定的实时追踪。其核心思想是通过检测驱动追踪&#xf…...

编程日记 2025/7/31 10:23:37

mne溯源后的数据初步处理方法

文章目录导入库 Yeo2011_7Networks_N1000绘制一些圆球来代表区域大小和强度单网络绘制和扩展的方式AI补充一下背景知识📚 **背景与研究来源**🧠 **7 个功能网络的定义**📂 **标签数据获取**🔍 **标签文件内容解析**&#x1f6e0…...

编程日记 2025/8/3 16:18:53

基于STM32进行FFT滤波并计算插值DA输出

文章目录一、前言背景二、项目构思1. 确定FFT点数、采样率、采样点数2. 双缓存设计三、代码实现1. STM32CubeMX配置和HAL库初始化2. 核心代码四、效果展示和后话五、项目联想与扩展1. 倍频2. 降频3. 插值3.1 线性插值3.2 样条插值一、前言背景 STM32 对 AD 采样信号进行快…...

编程日记 2025/8/3 9:44:54

【用 Trace读源码】PlanAgent 执行流程

前提条件在 Trae 中打开 OpenManus 工程，使用 build 模式，模型选择 claude-sonnet-3.7 提示词分析 agent/planning.py 中 main 方法及相关类的执行流程，以流程图的方式展示PlanningAgent 执行流程图以下流程图展示了 PlanningAgent 类…...

编程日记 2025/8/4 12:15:41

AI代码编辑器：Cursor和Trae

Cursor 定义：Cursor 是一款基于AI的代码编辑器，它继承了VS Code的核心功能，并在此基础上增加了深度AI支持。它支持代码生成、优化、重构以及调试等功能，提供直观的Diff视图和自动补全功能，是一款功能强大的编程工具。…...

编程日记 2025/8/3 15:11:43

LSM-Tree（Log-Structured Merge-Tree）详解

1. 什么是 LSM-Tree？ LSM-Tree（Log-Structured Merge-Tree）是一种针对写优化的存储结构，广泛用于 NoSQL 数据库（如 LevelDB、RocksDB、HBase、Cassandra）等系统。它的核心思想是：写入时只追加写（Append-Only），将数据先写入内存缓冲区（MemTable）。内存数据满后…...

编程日记 2025/7/30 8:11:20

介绍一个测试boostrap表格插件的好网站！

最近在开发一个物业管理系统。用到bootstrap的表格插件bootstrap table，官方地址： https://bootstrap-table.com/ 因为是英文界面，对国人不是很友好。后来发现了IT小书童网站 IT小书童 - 为程序员提供优质教程和文档网站： IT…...

编程日记 2025/8/4 4:56:52

虚拟路由与单页应用（SPA）：详解

在单页应用（SPA，Single Page Application）中，虚拟路由（也称为前端路由）是一种关键的技术，用于管理页面导航和状态变化，而无需重新加载整个页面。为了帮助你更好地理解这一概念&#…...

编程日记 2025/7/31 18:47:00

基于树莓派3B+的人脸识别实践：Python与C联合开发

基于树莓派3B的人脸识别实践：Python与C联合开发引言树莓派因其小巧的体积和丰富的扩展性，成为嵌入式开发的理想平台。本文将分享如何通过Python与C语言联合开发，在树莓派3B上实现从硬件控制、摄像头拍照到百度API人脸比对的完整流程。项目…...

编程日记 2025/7/28 7:46:05

尝试使用Tauri2+Django+React项目（2）

前言尝试使用tauri2DjangoReact的项目-CSDN博客https://blog.csdn.net/qq_63401240/article/details/146403103在前面笔者不知道怎么做，搞了半天笔者看到官网，原来可以使用二进制文件，好好好嵌入外部二进制文件 | Taurihttps://v2.taur…...

编程日记 2025/8/3 1:23:32

Qt桌面客户端跨平台开发实例

在Windows平台上，桌面客户端软件通常使用C/C语言和Qt跨平台开发框架进行开发。因此，大部分代码可以运行于不同平台环境，但是程序运行依赖的三方库以及代码中一些平台相关的头文件和接口需要进行平台兼容。本文以windows桌面端应用迁移到Linux…...

编程日记 2025/8/1 8:33:24

c++进阶之------红黑树

一、概念红黑树（Red-Black Tree）是一种自平衡二叉查找树，它在计算机科学的许多领域中都有广泛应用，比如Java中的TreeMap和C中的set/map等数据结构的底层实现。红黑树通过在每个节点上增加一个颜色属性（红色或黑色&am…...

编程日记 2025/7/31 16:14:46

政安晨【超级AI工作流】—— 使用Dify通过工作流对接ComfyUI实现多工作流协同

政安晨的个人主页：政安晨欢迎 👍点赞✍评论⭐收藏希望政安晨的博客能够对您有所裨益，如有不足之处，欢迎在评论区提出指正！ 目录一、准备工作 Dify跑起来 ollama局域网化配置 Dify配置并验证启动ComfyUI 二、…...

编程日记 2025/7/31 20:48:23

javaweb开发以及部署

先说一个阿里云学生无门槛免费领一年2核4g服务器的方法： 阿里云服务器学生无门槛免费领一年2核4g_阿里云学生认证免费服务器-CSDN博客 Java Web开发是使用Java编程语言开发Web应用程序的过程，通常涵盖了使用Java EE（Java Enterprise Edition…...

编程日记 2025/7/29 4:56:15

树莓派5介绍与系统安装

简介 Raspberry Pi 5采用运行频率为2.4GHz的64位四核Arm Cortex-A76处理器，与Raspberry Pi 4相比， CPU性能提高了2至3倍。此外，它还配备了一个800MHz的VideoCore VII GPU，可以提供大幅度的图形性能提升，通过HDMI实现…...

编程日记 2025/8/1 5:34:19

菜鸟之路Day25一一前端工程化（二）

菜鸟之路Day25一一前端工程化（二） 作者：blue 时间：2025.3.19 文章目录菜鸟之路Day25一一前端工程化（二）1.概述2.Element快速入门3.综合案例一.布局二.组件三.Axios异步加载数据1. 生命周期钩子概述2. mo…...

编程日记 2025/8/2 22:46:56

vue如何获取 sessionStorage的值,获取token

// 使用Axios发送请求并处理下载 import axios from axios;const handleDownload () > {const params {warehouseId: selectedWarehouseId.value};const apiUrl /api/materials/wmMatCheck/export-wmMatCheckDetail;axios.get(apiUrl, {params,responseType: blob, // 接…...

编程日记 2025/8/4 1:21:49

图解AUTOSAR_CP_DiagnosticLogAndTrace

AUTOSAR 诊断日志和跟踪(DLT)模块详解 AUTOSAR 经典平台中的诊断和调试关键组件目录 1. 概述2. DLT模块架构 2.1 模块位置2.2 内部组件2.3 接口定义 3. DLT操作流程 3.1 初始化流程3.2 日志和跟踪消息处理3.3 控制命令处理 4. 数据结构与配置模型 4.1 配置类4.2 消息格式4.3 …...

编程日记 2025/7/30 4:40:42

微调实战 - 使用 Unsloth 微调 QwQ 32B 4bit （单卡4090）

本文参考视频教程：赋范课堂 – 只需20G显存，QwQ-32B高效微调实战！4大微调工具精讲！知识灌注问答风格微调，DeepSeek R1类推理模型微调Cot数据集创建实战打造定制大模型！ https://www.bilibili.com/video/BV1…...

编程日记 2025/7/31 4:57:43

金仓KESV8R6任务调度

基本概念 • 程序（program） 程序对象描述调度器要运行的内容。 • 调度计划（schedule） 调度计划对象指定作业何时运行以及运行多少次。调度计划可以被多个作业共享。 • 作业（job） 作业就是用户定义的…...

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

Maven常见问题汇总

Maven刷新,本地仓库无法更新现象 This failure was cached in the local repository and resolution is not reattempted until the update interval of aliyunmaven has elapsed or updates are forced原因因为上一次尝试下载，发现对应的仓库没有这个maven配置…...

编程日记 2025/7/29 20:35:55

颠覆者的困局：解构周鸿祎商业哲学中的“永恒战争”

引言：被误解的破坏者在北京海淀区知春路银谷大厦的某间会议室里，周鸿祎用马克笔在白板上画出一个巨大的爆炸图案——这是2010年360与腾讯开战前夜的战术推演场景。这个充满硝烟味的瞬间，恰是《颠覆者》精神内核的完美隐喻：在中国…...

编程日记 2025/7/31 13:58:04

基于ChatGPT、GIS与Python机器学习的地质灾害风险评估、易发性分析、信息化建库及灾后重建高级实践

第一章、ChatGPT、DeepSeek大语言模型提示词与地质灾害基础及平台介绍【基础实践篇】 1、什么是大模型？ 大模型（Large Language Model, LLM）是一种基于深度学习技术的大规模自然语言处理模型。代表性大模型：GPT-4、BERT、T5、Ch…...

编程日记 2025/7/28 10:36:22

如何实现单点登录？

单点登录（Single Sign-On, SSO）是一种身份验证机制，允许用户在多个应用系统中只登录一次，就能够访问所有受保护的系统或服务，而无需重复登录。SSO通过集中式认证来简化用户的登录体验，提高安全性，并减少管理复杂性。一、原理 SSO的核心原理是通过一个认证中心（Ident…...

编程日记 2025/7/31 9:43:57

01 Overview

版本pytorch 0.4，应用期的技术学习的前提线性代数和概率分布，高数内容穷举、贪心、分治算法、动态规划花书是经典中的经典机器学习历史 1 基于规则的 2 经典的机器学习方法 3 深度学习深度学习竞赛识别率超过了人类神经网络是数学和工…...

编程日记 2025/7/28 22:59:26

第二天开始Unity Shader的学习之旅之熟悉顶点着色器和片元着色器

Shader初学者的学习笔记第二天开始Unity Shader的学习之旅之熟悉顶点着色器和片元着色器文章目录 Shader初学者的学习笔记前言一、顶点/片元着色器的基本结构① Shader "Unity Shaders Book/Chapter 5/ Simple Shader"② SubShader③ CGPROGRAM和ENDCG④ 指明顶点…...

编程日记 2025/7/30 1:08:19

moveit2基础教程上手-使用xarm6演示

0、前置信息开发环境：wsl。 ros版本：jazzy，ubuntu版本：24.04 xarm-ros2地址 1、启动Rviz，加载 Motion Planning Plugin，实现演示功能 Getting Started — MoveIt Documentation: Rolling documentation…...

编程日记 2025/7/31 13:55:27

头部姿态估计（Head Pose Estimation）领域，有许多开源工具和库可供选择，一些常用的工具及其特点

在头部姿态估计（Head Pose Estimation）领域，有许多开源工具和库可供选择。以下是一些常用的工具及其特点比较： 1. OpenCV 特点: OpenCV 是一个广泛使用的计算机视觉库，提供了丰富的图像处理和计算机视觉算法。虽然 O…...

编程日记 2025/7/29 14:23:51

Qt调用Miniconda的python方法

1、 Win 64环境下载及安装 Miniconda 首先下载Windows 版Miniconda，https://docs.conda.io/en/latest/miniconda.html或 https://repo.anaconda.com/miniconda/ 安装界面及选择如下图所示： 安装完python3.12版报错如下。说明：python3.11版…...

编程日记 2025/7/25 17:19:04

【Linux 下的 bash 无法正常解析, Windows 的 CRLF 换行符问题导致的】

文章目录报错原因：解决办法：方法一：用 dos2unix 修复方法二：手动转换换行符方法三：VSCode 或其他编辑器手动改总结这个错误很常见，原因是你的 wait_for_gpu.sh 脚本文件格式不对，具体来说…...

编程日记 2025/8/1 5:21:27

DSP数字信号处理

数字信号处理（Digital Signal Processing，简称DSP）是一门研究如何通过数字技术对信号进行分析、修改和合成的学科。DSP在现代电子系统中无处不在，广泛应用于音频处理、视频处理、通信、雷达、医学成像等领域。什么是数字信号处理…...

编程日记 2025/8/3 1:37:07

一、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.总结

示例：

相关文章：

一、线性渐变（`linear-gradient`）

二、径向渐变（`radial-gradient`）

三、圆锥渐变（`conic-gradient`）

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