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

[CSS3]属性增强2

news 来源：原创 2025/7/26 14:47:54

空间转换

使用transform属性实现元素在空间内的位移、旋转、缩放等效果

空间: 是从坐标轴角度定义的。x、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
空间转换也叫3D转换

空间位移

使用translate实现元素空间位移效果

transform: translate3d(x, y ,z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
取值正负均可, 支持像素单位, 支持百分比单位
Z轴方向, 正值向我向我靠近, 负值向我远离

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>空间位移</title><style>.box {width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5s;}.box:hover {transform: translate3d(50px, 100px, 200px);transform: translateX(100px);transform: translateY(100px);/* 目前看不到效果 */transform: translateZ(100px);}</style>
</head><body><div class="box"></div>
</body></html>

使用perspective属性实现透视效果

思考: 生活中，同一个物体，观察距离不同，视觉上有什么区别 ? 答: 近大远小、近清楚远模糊
思考: 默认情况下，为什么无法观察到Z轴位移效果? 答: Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果
屏幕想要展现Z轴对元素的影响, 就要通过透视属性, 模拟透视环境, 实现近大远小效果
透视属性需要添加给父级元素
语法: perspective: 取值;
取值支持像素单位, 建议范围800px-1200px

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>透视效果</title><style>body {perspective: 1000px;/* perspective: 200px; *//* perspective: 10000px; */}.box {width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5s;}.box:hover{transform: translateZ(200px);/* transform: translateZ(-200px); */}</style>
</head><body><div class="box"></div>
</body></html>

如果透视距离的取值过大或者过小会怎么样?

透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离
如果perspective的取值很小, 类似于眼睛贴在屏幕上, 元素很小的移动, 都会很夸张的展示, 因为太近了
如果perspective的取值很大, 类似于眼睛距离屏幕很远, 元素的移动效果会变弱, 因为太远了

空间旋转

使用rotate实现元素空间旋转效果

transform: rotateZ(值);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>空间旋转-Z轴</title><style>.box {width: 300px;margin: 100px auto;}img {width: 300px;transition: all 2s;}.box img:hover {transform: rotateZ(360deg);}</style>
</head>
<body><div class="box"><img src="./images/hero.jpeg" alt=""></div>
</body>
</html>

transform: rotateX(值);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>空间旋转-X轴</title><style>.box {width: 300px;margin: 100px auto;}img {width: 300px;transition: all 2s;}.box {/* 透视效果：近大远小，近实远虚 */perspective: 1000px;}.box img:hover {transform: rotateX(60deg);transform: rotateX(-60deg);}</style>
</head>
<body><div class="box"><img src="./images/hero.jpeg" alt=""></div>
</body>
</html>

transform: rotateY(值)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>空间旋转-Y轴</title><style>.box {width: 300px;margin: 100px auto;}img {width: 300px;transition: all 2s;}.box {/* 透视效果：近大远小，近实远虚 */perspective: 1000px;}.box img:hover {transform: rotateY(60deg);transform: rotateY(-60deg);}</style>
</head>
<body><div class="box"><img src="./images/hero.jpeg" alt=""></div>
</body>
</html>

左手法则: 快速判断旋转方向

先判断元素的旋转轴, 是X轴还是Y轴, 还是Z轴
左手握住旋转轴, 拇指指向正值方向,
手指弯曲的方向就是旋转正值方向

3d旋转：transform:rotate3d(角度);

rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度
x，y，z 取值为0-1之间的数字
其实就是自定义旋转轴, 通过xyz三个坐标, 可以指定空间内的任意旋转轴
当标准的xyz轴不能满足需求时, 才会自定义旋转轴

立体呈现: 使用transform-style:preserve-3d呈现立体图形

思考: 使用perspective透视属性能否呈现立体图形?
答: 不能，perspective只增加近大远小、近实远虚的视觉效果。
实现方法:

元素的父元素添加 transform-style: preserve-3d;
使子元素处于真正的3d空间

案例: 呈现立体图形步骤

盒子父元素添加transform-style:preserve-3d
按需求设置子盒子的位置(位移或旋转)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>立体呈现</title><style>.cube {position: relative;width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 2s;/* 1.父元素开启3d环境  */transform-style: preserve-3d;}.cube div {/* 2.两个子元素通过定位叠在一起 */position: absolute;left: 0;top: 0;width: 200px;height: 200px;}.front {background-color: orange;/* 3.正面这个元素在z轴向我位移, 使叠在一起的元素分开,产生空间分离 *//* 向我走近200px */transform: translateZ(200px);}.back {background-color: green;}/* cube hover 为了看空间感效果 */.cube:hover {transform: rotateY(90deg);}</style>
</head>
<body><div class="cube"><div class="front">前面</div><div class="back">后面</div></div>
</body>
</html>

使用立体呈现技巧实现3D导航效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D导航</title><style>ul {margin: 0;padding: 0;list-style: none;}.navs {width: 300px;height: 40px;margin: 50px auto;}.navs li {position: relative;float: left;width: 100px;height: 40px;line-height: 40px;transition: all .5s;transform-style: preserve-3d;/* 旋转: 让大家在写代码的过程中看到立体盒子 *//* transform: rotateX(-20deg) rotateY(30deg); */}.navs li a {position: absolute;left: 0;top: 0;display: block;width: 100%;height: 100%;text-align: center;text-decoration: none;color: #fff;}.navs li a:first-child {background-color: green;transform: translateZ(20px);}.navs li a:last-child {background-color: orange;/* 躺平x轴旋转  立方体的顶部,位移z(确保看到这个盒子) */transform: rotateX(90deg) translateZ(20px);}/* li:hover 立方体旋转 */.navs li:hover {transform: rotateX(-90deg);}</style>
</head><body><div class="navs"><ul><li><a href="#">首页</a><a href="#">Index</a></li><li><a href="#">登录</a><a href="#">Login</a></li><li><a href="#">注册</a><a href="#">Register</a></li></ul></div>
</body></html>

空间缩放

使用scale实现空间缩放效果

支持的语法

transform: scaleX(缩放倍数);
transform: scaleY(缩放倍数);
transform: scaleZ(缩放倍数);
transform: scale3d(x, y, z);

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D导航</title><style>ul {margin: 0;padding: 0;list-style: none;}.navs {width: 300px;height: 40px;margin: 50px auto;}.navs li {position: relative;float: left;width: 100px;height: 40px;line-height: 40px;transition: all .5s;transform-style: preserve-3d;/* 旋转: 让大家在写代码的过程中看到立体盒子 *//* transform: rotateX(-20deg) rotateY(30deg); *//* 测试缩放效果 */transform: scale3d(0.5, 1.1, 2);}.navs li a {position: absolute;left: 0;top: 0;display: block;width: 100%;height: 100%;text-align: center;text-decoration: none;color: #fff;}.navs li a:first-child {background-color: green;transform: translateZ(20px);}.navs li a:last-child {background-color: orange;/* 躺平x轴旋转  立方体的顶部,位移z(确保看到这个盒子) */transform: rotateX(90deg) translateZ(20px);}/* li:hover 立方体旋转 */.navs li:hover {transform: rotateX(-90deg);}</style>
</head><body><div class="navs"><ul><li><a href="#">首页</a><a href="#">Index</a></li><li><a href="#">登录</a><a href="#">Login</a></li><li><a href="#">注册</a><a href="#">Register</a></li></ul></div>
</body></html>

动画属性

介绍

过度效果与动画效果

思考: 过渡可以实现什么效果?
答: 实现2个状态间的变化过程
动画效果: 实现多个状态间的变化过程，动画过程可控(重复播放、最终画面、是否暂停)

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面

构成动画的最小单元: 帧或动画帧

动画的实现

动画的基本使用流程

定义动画

使用动画

基本使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动画实现步骤</title><style>.box {width: 200px;height: 100px;background-color: pink;/* 使用动画 */animation: change 1s;}/* 一. 定义动画：从200变大到600 *//* @keyframes change {from {width: 200px;}to {width: 600px;}} *//* 二. 定义动画：200 到 500*300 到 800*500 *//* 百分比指的是动画总时长的占比 *//* 动画时长是1s, 所以盒子宽度从200到500的时长是0.5s *//* 盒子宽度从500到800的时长也是0.5s  */@keyframes change {0% {width: 200px;}50% {width: 500px;height: 300px;}100% {width: 800px;height: 500px;}}</style>
</head><body><div class="box"></div>
</body></html>

动画属性-复合写法

使用animation相关属性控制动画执行过程

动画名称和动画时长必须赋值
取值不分先后顺序
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>animation复合属性</title><style>.box {width: 200px;height: 100px;background-color: pink;/* 匀速动画: linear *//* animation: change 1s linear; *//* 分步动画 *//* 把动画分成3步执行, 效果就是一窜一窜的*//* animation: change 1s steps(3); *//* 延时动画: 1s后开始播放动画 *//* animation: change 1s steps(3) 1s; *//* 动画重复3次播放 *//* animation: change 1s steps(3) 1s 3; *//* 无限循环 *//* animation: change 1s infinite; *//* 动画方向  *//* 默认是单向动画, 动画结束后立即恢复到初始状态  *//* alternate双向动画, 动画结束后恢复到初始状态时也有动画效果  *//* animation: change 1s infinite alternate; *//* 结束状态 *//* 动画结束后停留在最初的状态, 默认值, *//* animation: change 1s backwards; *//* 动画结束后停留在结束状态 */animation: change 1s forwards;}@keyframes change {from {width: 200px;}to {width: 600px;}}</style>
</head><body><div class="box"></div>
</body></html>

动画属性-拆分写法

拆分写法和复合写法实现的效果一样, 这里了解一下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>animation拆分写法</title><style>.box {width: 200px;height: 100px;background-color: pink;animation-name: change;animation-duration: 1s;animation-iteration-count: infinite;}.box:hover {/* 鼠标移入的时候暂停动画, 离开后恢复动画 */animation-play-state: paused;}@keyframes change {from {width: 200px;}to {width: 600px;}}</style>
</head>
<body><div class="box"></div>
</body>
</html>

逐帧动画

使用steps实现逐帧动画

补间动画: 两帧之间由程序自动进行插帧, 让动画效果平滑
逐帧动画: 两帧之间不进行插针, 动画是一蹦一蹦的

补帧动画一般是配合精灵图, 实现动画效果

补帧动画(也叫精灵动画)的原理:

实现步骤

1. 准备显示区域: 尺寸是精灵图一个画面的尺寸, 将背景图设置为精灵图
2. 定义动画: 改变背景图的位置(移动距离是精灵图的宽度)
3. 使用动画: 添加速度曲线steps(N), N设置为精灵图画面的个数, 并添加无限重复效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>精灵动画</title><style>.box {/* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */width: 140px;height: 140px;/* border: 1px solid #000; */background-image: url(./images/bg.png);/* 12: 精灵小图的个数 */animation: move 1s steps(12) infinite;}@keyframes move {/* from {background-position: 0 0;} */to {/* 1680: 精灵图的宽度 */background-position:  -1680px 0;}}/* 定义一个盒子移动的动画  800px */@keyframes run {/* 动画的开始状态和盒子的默认样式相同的, 可以省略开始状态的代码 *//* from {transform: translateX(0);} */to {transform: translateX(800px);}}</style>
</head><body><div class="box"></div>
</body>
</html>

多组动画: 使用animation属性给一个元素添加多个动画效果

思考: 现在小人可以原地跑了, 如果想让小人跑远一些，该如何实现?
答: 精灵动画的同时添加盒子位移动画
语法

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>精灵动画</title><style>.box {/* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */width: 140px;height: 140px;background-image: url(./images/bg.png);/* 12: 净零小图的个数 */animation:move 1s steps(12) infinite,run 1s forwards;}@keyframes move {to {/* 1680: 精灵图的宽度 */background-position: -1680px 0;}}/* 定义一个盒子移动的动画  800px */@keyframes run {to {transform: translateX(800px);}}</style>
</head><body><div class="box"></div>
</body></html>

无缝动画

使用animation实现逐帧图片位移效果(走马灯)

核心原理:

窗口展示3张图, 就把列表的前3张图复制到列表最后,
当列表滚动到最后时, 展示的内容与列表最前的内容一致, 就形成视觉差, 感觉整个列表是连贯的

代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {padding: 0;margin: 0;}li {list-style: none;}img {width: 200px;}.box {width: 600px;height: 112px;border: 5px solid #000;margin: 100px auto;overflow: hidden;}.box ul {width: 2000px;animation: move 5s infinite linear;}.box li {float: left;}/* 定义动画:位移, ul 左侧使用  x -1400  */@keyframes move {to {transform: translateX(-1400px);}}/* 用户鼠标移入box,动画暂停 */.box:hover ul {animation-play-state: paused;}</style></head><body><div class="box"><ul><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li><li><img src="./images/4.jpg" alt="" /></li><li><img src="./images/5.jpg" alt="" /></li><li><img src="./images/6.jpg" alt="" /></li><li><img src="./images/7.jpg" alt="" /></li><!-- 第567移动的时候,显示区域不能留白 --><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li></ul></div></body>
</html>

动画库

wordPress 前端+后台模板

fullPage 全屏滚动

Animate.css 让滚动更有趣

动画库的使用:

WOW.js – 让页面滚动更有趣_dowebok

[CSS3]属性增强2

空间转换使用transform属性实现元素在空间内的位移、旋转、缩放等效果空间: 是从坐标轴角度定义的。x、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。空间转换也叫3D转换空间位移使用translate实现元素空间位移效果 transform: translate3d(x…...

编程日记 2025/7/26 14:47:54

Go 语言 vs C+Lua（Skynet）游戏服务器方案对比分析

为啥挑这两个呢？因为两种技术分别对应CSP模型和Actor模型，都是经过时间检验的成熟且可靠的并发模型，问了很多地方，经过gpt整理得出如下报告。从开发效率、运行性能、热更新扩展、云部署与水平扩展能力、多类型游戏支持等五个维度…...

编程日记 2025/7/22 2:16:16

ArcGIS Pro 3.4 二次开发 - 内容

环境：ArcGIS Pro SDK 3.4 .NET 8 文章目录内容1 工程1.1 创建一个空工程1.2 使用指定名称创建新工程1.3 使用Pro的默认设置创建新工程1.4 使用自定义模板文件创建新工程1.5 使用 ArcGIS Pro 提供的模板创建工程1.6 打开现有工程1.7 获取当前工程1.8 获取当前工程的…...

编程日记 2025/7/26 14:41:50

java每日精进 5.19【Excel 导入导出】

基于 EasyExcel 实现 Excel 的读写操作，可用于实现最常见的 Excel 导入导出等功能。 Excel 导入导出功能涉及前后端协作，后端处理数据查询、文件生成和解析，前端提供用户交互和文件下载/上传界面。以下是全流程解析，分为导出流程…...

编程日记 2025/7/26 14:44:49

基于Elasticsearch的搜索引擎简介

## 一、Elasticsearch简介 Elasticsearch（简称ES）是一个开源的、分布式、RESTful风格的搜索和数据分析引擎，基于Apache Lucene开发。它能够实现对海量结构化和非结构化数据的实时存储、搜索和分析，广泛应用于全文检索、日志分析、…...

编程日记 2025/7/24 7:03:37

不同类型桥梁的无人机检测内容及技术难度

不同类型桥梁的无人机检测内容及技术难度无人机桥梁检测的难度因桥梁类型、结构特点和所处环境的不同而存在显著差异。以下是针对梁桥、拱桥、斜拉桥、悬索桥等主要桥梁类型的无人机检测难度分析： 1. 梁桥（简支梁、连续梁） 检测难度&#x…...

编程日记 2025/7/18 4:45:55

数据结构实验10.1：内部排序的基本运算

文章目录一，实验目的二，实验内容1. 数据生成与初始化2. 排序算法实现（1）直接插入排序（2）二分插入排序（3）希尔排序（4）冒泡排序（5）快速…...

编程日记 2025/7/25 21:13:47

java20

1.List集合 2.数据结构之栈，队列，数组，链表 3.ArrayList集合 4.LinkedList 5.泛型注意：E...e是指若干个变量...

编程日记 2025/7/24 8:02:33

LLM笔记（九）KV缓存（2）

文章目录 1. 背景与动机2. 不使用 KV Cache 的情形2.1 矩阵形式展开2.2 计算复杂度 3. 使用 KV Cache 的优化3.1 核心思想3.2 矩阵形式展开3.3 计算复杂度对比 4. 总结5. GPT-2 中 KV 缓存的实现分析5.1 缓存的数据结构与类型5.2 在注意力机制 (GPT2Attention) 中使用缓存5.3 缓…...

编程日记 2025/7/23 18:11:41

将 Element UI 表格拖动功能提取为公共方法

为了在多个页面复用表格拖动功能，我们可以将其封装成以下两种形式的公共方法： 方案一：封装为 Vue 指令（推荐） 1. 创建指令文件 src/directives/tableDrag.js import interact from interactjs;export default {inse…...

编程日记 2025/7/25 18:52:45

项目中把webpack 打包改为vite 打包

项目痛点: 老vu e-cli1创建的项目,项目是ERP系统集成了很多很多管理,本地运行调试的时候,每次修改代码都需要等待3分钟左右的编译时间,严重影响开发效率. 解决方案: 采用vite构建项目工程方案执行第一步使用vite脚手架构件一个项目,然后把build文件自定义的编译逻辑般到…...

编程日记 2025/7/25 12:56:52

Vue3 Element Plus 中el-table-column索引使用问题

在 Element Plus 的 el-table 组件中，使用 scope.index 是不准确的。正确的索引属性应该是 scope.$index。你的代码需要调整为： vue 复制下载 <el-button type"primary" size"default" text click"onModifyClick(scope…...

编程日记 2025/7/21 19:37:39

盲盒一番赏小程序系统发展：创新玩法激发市场活力

盲盒一番赏小程序系统凭借其创新的玩法，在潮玩市场中脱颖而出，激发了市场的无限活力。它不仅保留了传统一番赏百分百中奖的特点，还结合线上平台的优势，开发出了更多新颖的玩法。例如，小程序系统设置了赏品回收功能。…...

编程日记 2025/7/22 9:33:36

MySQL故障排查

目录 MySQL 单示例故障排查故障现象一故障现象二故障现象三故障现象四故障现象五故障现象六故障现象七故障现象八 MySQL主从复制排查故障现象一故障现象二故障现象三 MySQL 优化硬件方面关于CPU 关于内存关于磁盘 MySQL配置文件核…...

编程日记 2025/7/24 1:04:21

微服务项目-＞在线oj系统(Java版 - 4)

相信自己,终会成功目录 B端用户管理 C端用户代码发送验证码: 验证验证码退出登录登录用户信息功能用户详情与用户编辑用户竞赛接口用户报名竞赛用户竞赛报名接口查询用户信息列表 ThreadLocalUtil Hutool工具库常用功能介绍 B端用户管理进行列表显示与…...

编程日记 2025/7/23 20:57:09

DDoS与CC攻击：谁才是服务器的终极威胁？

在网络安全领域，DDoS（分布式拒绝服务）与CC（Challenge Collapsar）攻击是两种最常见的拒绝服务攻击方式。它们的目标都是通过消耗服务器资源，导致服务不可用，但攻击方式、威胁程度和防御策略存在显…...

编程日记 2025/7/25 10:29:25

旧物回收小程序，一键解决旧物处理难题

在快节奏的现代生活中，我们常常会面临旧物处理的困扰。扔掉觉得可惜，留着又占空间，而且处理起来还十分麻烦。别担心，我们的旧物回收小程序来啦，只需一键，就能轻松解决你的旧物处理难题！ 这款小…...

编程日记 2025/7/24 23:42:09

utils.js let systemInfo null;export const getSystemInfo () > {if (!systemInfo) {systemInfo uni.getSystemInfoSync();// 补充安全区域默认值systemInfo.safeAreaInsets systemInfo.safeAreaInsets || {top: 0,bottom: 0,left: 0,right: 0};// 确保statusBarHei…...

编程日记 2025/7/25 20:12:16

小程序弹出层/抽屉封装（抖音小程序）

最近忙于开发抖音小程序，最想吐槽的就是，既没有适配的UI框架，百度上还找不到关于抖音小程序的案列，我真的很裂开啊，于是我通过大模型封装了一套代码效果如下介绍可以看到这个弹出层是支持关闭和标题显示的&#xf…...

编程日记 2025/7/23 12:11:07

map与set封装

封装map和set一般分为6步： 1.封装map与set 2.普通迭代器 3.const 迭代器 4.insert返回值处理 5.map operator【】 6.key不能修改的问题一.红黑树的改造 map与set的底层是通过红黑树来封装的，但是map与set的结点储存的值不一样，set只需要存…...

编程日记 2025/7/24 19:20:21

【C语言基础语法入门】通过简单实例快速掌握C语言核心概念

文章目录 1. Hello World：第一个C程序2. 变量与数据类型3. 运算符4. 控制结构4.1 if-else 条件判断4.2 for 循环4.3 while 循环 5. 函数6. 数组7. 指针8. 结构体总结 📣按照国际惯例，首先声明：本文只是我自己学习的理解&#xff0…...

编程日记 2025/7/22 17:32:45

Manus AI 突破多语言手写识别技术壁垒：创新架构、算法与应用解析

在人工智能领域，手写识别技术作为连接人类自然书写与数字世界的桥梁，一直备受关注。然而，多语言手写识别面临诸多技术挑战，如语言多样性、书写风格差异、数据稀缺性等。Manus AI 作为该领域的领军者，通过一系列创新技术…...

编程日记 2025/7/21 17:34:57

数字图像处理——图像压缩

背景图像压缩是一种减少图像文件大小的技术，旨在在保持视觉质量的同时降低存储和传输成本。随着数字图像的广泛应用，图像压缩在多个领域如互联网、移动通信、医学影像和卫星图像处理中变得至关重要。技术总览当下图像压缩JPEG几乎一统天下&#xff…...

编程日记 2025/7/23 22:18:28

SGLang和vllm比有什么优势？

环境： SGLang vllm 问题描述： SGLang和vllm比有什么优势？ 解决方案： SGLang和vLLM都是在大语言模型（LLM）推理和部署领域的开源项目或框架，它们各自有不同的设计目标和优势。下面我综合目前…...

编程日记 2025/7/24 8:33:49

BeanFactory和FactoryBean的区别

目录 1、Spring-core 2、控制反转（IoC） 2.1、定义 2.2、实现方式 1、BeanFactory 2、ApplicationContext 3、FactoryBean BeanFactory是容器，管理所有Bean(包括FactoryBean)，FactoryBean是被管理的Bean，只是它有…...

编程日记 2025/7/21 21:43:02

仓颉开发语言入门教程：搭建开发环境

仓颉开发语言作为华为为鸿蒙系统自研的开发语言，虽然才发布不久，但是它承担着极其重要的历史使命。作为鸿蒙开发者，掌握仓颉开发语言将成为不可或缺的技能，今天我们从零开始，为大家分享仓颉语言的开发教程，…...

编程日记 2025/7/25 23:15:14

火花生态【算力通】公测，助力全球闲置算力训练AI模型

近日,在数字化浪潮迅猛推进的大背景下,人工智能模型训练对算力的需求呈井喷式增长,而全球范围内大量算力资源却处于闲置状态,如何高效整合这些闲置算力,成为推动行业发展的关键命题。在此关键时刻,火花生态旗下的核心产品【算力通】(ComputePower)于 2025 年 5 月 10 日正式开启…...

编程日记 2025/7/23 20:38:22

OpenMV IDE 的图像接收缓冲区原理

OpenMV IDE 的图像接收缓冲区原理与嵌入式图像处理系统的数据流控制密切相关。以下是其核心工作原理的分步解析： 一、图像缓冲区架构 OpenMV 的整个图像处理流程基于双缓冲（Double Buffering）机制，主要分为以下层级&#xff1…...

编程日记 2025/7/21 18:10:50

如何在LVGL之外的线程更新UI内容

前言作为一个刚开始学习LVGL和嵌入式开发的新手，学会绘制一个界面之后，遇到了一个问题：在LVGL线程之外的线程，更新UI内容时，会导致程序崩溃。 1、问题分析首先，需要了解LVGL的基本工作原理。LVGL&#…...

编程日记 2025/7/24 19:30:52

实景VR展厅制作流程与众趣科技实景VR展厅应用

实景VR展厅制作是一种利用虚拟现实技术将现实世界中的展览空间数字化并在线上重现的技术。这种技术通过三维重建和扫描等手段，将线下展馆的场景、展品和信息以三维形式搬到云端数字空间，从而实现更加直观、立体的展示效果。在制作过程中，首…...

编程日记 2025/7/22 13:56:10

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

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

编程日记 2025/7/22 2:06:57

计算机网络-HTTP与HTTPS

文章目录计算机网络网络模型网络OSITCP/IP 应用层常用协议HTTP报文HTTP状态码HTTP请求类型HTTP握手过程HTTP连接HTTP断点续传HTTPSHTTPS握手过程计算机网络网络模型为了解决多种设备能够通过网络相互通信，解决网络互联兼容性问题。网络模型是计算机网络中用于…...

编程日记 2025/7/25 1:25:00

Text2SQL在Spark NLP中的实现与应用：将自然语言问题转换为SQL查询的技术解析

概述 SQL 仍然是当前行业中最受欢迎的技能之一免责声明：Spark NLP 中的 Text2SQL 注释器在 v3.x（2021 年 3 月）中已被弃用，不再使用。如果您想测试该模块，请使用 Spark NLP for Healthcare 的早期版本。自新千年伊…...

编程日记 2025/7/23 16:14:23

Ubuntu20.04下使用dpkg方式安装WPS后，将WPS改为中文界面方法

Ubuntu20.04下使用dpkg方式安装WPS后，将WPS改为中文界面方法说明方法说明 Ubuntu20.04下使用dpkg方式安装WPS后，打开WPS后，发现界面是英文的，如有需要可以按照下面的方法将其改为中文界面。方法 cd /opt/kingsoft/wps-offic…...

编程日记 2025/7/10 20:00:45

OpenCV CUDA 模块中的矩阵算术运算-----在频域（复数频谱）中执行逐元素乘法并缩放的函数mulAndScaleSpectrums()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 mulAndScaleSpectrums()是OpenCV CUDA模块中用于在频域（复数频谱）中执行逐元素乘法并缩放的函数。这个函数主要用于在…...

编程日记 2025/7/26 7:04:29

批量剪辑 + 矩阵分发 + 数字人分身源码搭建全技术解析，支持OEM

在互联网内容生态蓬勃发展的当下，企业与创作者对内容生产与传播效率的要求日益增长。批量剪辑、矩阵分发和数字人分身技术的融合，成为提升内容创作与运营效能的关键方案。从源码层面实现三者的搭建与整合，需要深入理解各功能技术原理&#xf…...

编程日记 2025/7/25 13:44:48

Spring Boot 与 RabbitMQ 的深度集成实践（三）

高级特性实现消息持久化在实际的生产环境中，消息的可靠性是至关重要的。消息持久化是确保 RabbitMQ 在发生故障或重启后，消息不会丢失的关键机制。它涉及到消息、队列和交换机的持久化配置。首先，配置队列持久化。在创建队列时&#xf…...

编程日记 2025/7/21 19:06:13

部署java项目

1.编写shell脚本部署服务 restart.sh #!/bin/bash # # start the user program # echo "-------------------- start jk service --------------------" LOG_DIR"/home/joy/usr/app/ers-log" LOG_FILE"$LOG_DIR/log_$(date "%Y%m%d").txt&…...

编程日记 2025/7/24 23:50:01

中国城市间交通驾车距离矩阵(2024)

中国城市间交通驾车距离矩阵(2024) 1852 数据简介中国城市中心的交通驾车距离，该数据为通过审图号GS(2024)0650的中国城市地图得其城市中心距离，再通过高德地图api计算得出其交通驾车最短距离矩阵，单位为KM，方便大家研究使用。…...

编程日记 2025/7/22 2:11:24

物联网数据湖架构

物联网海量数据湖分析架构（推荐实践） ┌──────────────┐ │ IoT设备端 │ └──────┬───────┘│（MQTT/HTTP）▼ ┌──────────────┐ │ EMQX等 │ 可选（也可…...

编程日记 2025/7/25 4:32:57

Python将Excel单元格某一范围生成—截图（进阶版—带样式+批量+多级表头）

目录专栏导读1、库的介绍2、库的安装3、核心代码4、通用版——带样式5、进阶版（可筛选+自动截图）多级表头版总结专栏导读 🌸 欢迎来到Python办公自动化专栏—Python处理办公问题，解放您的双手 🏳️‍🌈 博客主页：请点击——> 一晌小贪欢的博客主页求关注 👍 该…...

编程日记 2025/7/17 14:00:14

使用Python将 Excel 中的图表、形状和其他元素导出为图片

目录为什么将 Excel 中的图表、形状和其他元素导出为图片？ 工具与设置 Python 将 Excel 图表导出为图片将图表导出为图片将图表工作表导出为图片 Python 将 Excel 中的形状和其他元素导出为图片微软 Excel 是一个功能强大的数据分析和可视化工具&#xff…...

编程日记 2025/7/23 16:47:07

从编程助手到AI工程师：Trae插件Builder模式实战Excel合并工具开发

Trae插件下载链接：https://www.trae.com.cn/plugin 引言：AI编程工具的新纪元在软件开发领域，AI辅助编程正在经历一场革命性的变革。Trae插件（原MarsCode编程助手）最新推出的Builder模式，标志着AI编程工具…...

编程日记 2025/7/24 17:46:19

AI大模型从0到1记录学习numpy pandas day25

第 3 章 Pandas 3.1 什么是Pandas Pandas 是一个开源的数据分析和数据处理库，它是基于 Python 编程语言的。 Pandas 提供了易于使用的数据结构和数据分析工具，特别适用于处理结构化数据，如表格型数据（类似于Excel表格）…...

编程日记 2025/7/25 0:37:13

【云实验】Excel文件转存到RDS数据库

实验名称：Excel文件转存到RDS数据库说明：把Excel的数据通过数据管理服务DMS（Data Management Service）导入到RDS MySQL数据库中。流程：创建一个RDS for MySQL的实例，再创建数据库和账号，通过D…...

编程日记 2025/7/22 8:31:25

用Python实现数据库数据自动化导出PDF报告：从MySQL到个性化文档的全流程实践

本文将介绍如何使用Python构建一个自动化工具，实现从MySQL数据库提取员工数据，并为每位员工生成包含定制化表格的PDF报告。通过该方案，可显著提升数据导出效率，避免手动操作误差，同时支持灵活的格式定制。需求&#…...

编程日记 2025/7/25 7:05:19

深入理解 ZAB：ZooKeeper 原子广播协议的工作原理

目录 ZAB 协议：ZooKeeper 如何做到高可用和强一致？🔒ZAB 协议的核心目标 🎯ZAB 协议的关键概念 💡ZAB 协议的运行阶段 🎬阶段一：Leader 选举 (Leader Election) 🗳️阶段二&#xff…...

编程日记 2025/7/24 9:28:25

Javascript本地存储的方式有哪些？区别及应用场景？（含Deep Seek讲解）

JavaScript本地存储方式的区别与适用场景 1. Cookie 特点: Cookie是一种较早的本地存储技术，主要通过HTTP协议在客户端和服务器之间传递数据。它的大小通常被限制为4KB以内，并且每次HTTP请求都会携带Cookie信息。缺点: 数据量有限制（最多4K…...

编程日记 2025/7/20 15:19:25

二元Logistic回归

二元Logistic回归在机器学习领域，二元Logistic回归是一种非常经典的分类模型，广泛用于解决具有两类标签的分类问题。Logistic回归通过逻辑函数（Sigmoid函数）将预测结果映射到概率值，并进行分类。一、Logistic回归 …...

编程日记 2025/7/19 19:08:55

Android framework 问题记录

一、休眠唤醒，很快熄屏 1.1 问题描述机器休眠唤醒后，没有按照约定的熄屏timeout 进行熄屏，很快就熄屏（约2s~3s左右） 1.2 原因分析： 抓取相关log，打印休眠背光相关调用栈 //具体打印调用栈…...

编程日记 2025/7/23 11:03:00