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

WEBSTORM前端 —— 第3章：移动 Web —— 第2节：空间转换、转化

article 2025/6/4 21:41:41

目录

一、空间转换

1.空间转换

2.空间转换 – 平移 

3.视距 perspective

4.空间 – 旋转 

③空间旋转——Z轴代码与效果视频

④空间旋转——X轴代码与效果视频

⑤空间旋转——Y轴代码与效果视频

5.立体呈现 – transform-style

案例 – 3D 导航

6.空间转换 – 缩放

①属性

②效果视频与代码

二、动画 - animation

1.动画 - animation

③动画体验效果视频与代码

④动画实现步骤

⑤animation复合属性

⑥animation拆分写法

⑦.案例—走马灯效果

2.动画 – 逐帧动画

3.动画 – 多组动画

4.案例—全民出游 

一、空间转换

1.空间转换

①空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。

②空间转换也叫 3D转换

③属性：transform

2.空间转换 – 平移 

①属性

②取值：（正负均可）

  1. 像素单位数值
  2. 百分比（参照盒子自身尺寸计算结果）

③提示 ：默认情况下，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 {/* 电脑是平面，默认无法观察 Z 轴平移效果 *//* transform: translate3d(100px, 200px, 300px); *//* 3d 小括号里面必须逗号隔开三个数 *//* transform: translate3d(100px, 200px); */transform: translateX(100px);transform: translateY(-100%);transform: translateZ(300px);}</style>
</head>
<body><div class="box"></div>
</body>
</html>

效果图：

3.视距 perspective

①作用：指定了观察者与 Z=0 平面的距离，为元素添加透视效果

②透视效果：近大远小、近实远虚

③属性：(添加给父级，取值范围 800-1200)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>透视效果</title><style>/* 视距属性必须添加给 直接父级 */.father {perspective: 1000px;/* perspective: 10000px;perspective: 100px; */}.son {width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5s;}.son:hover{transform: translateZ(-300px);transform: translateZ(300px);}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

 效果视频：

移动web【视距 perspective】

4.空间 – 旋转 

transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);

①左手法则 – 根据旋转方向确定取值正负 ：左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向

②拓展

  1. rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
  2. x，y，z 取值为0-1之间的数字

③空间旋转——Z轴代码与效果视频

<!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>

空间旋转——Z轴代码与效果视频

④空间旋转——X轴代码与效果视频

<!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>

空间旋转——X轴代码与效果视频

⑤空间旋转——Y轴代码与效果视频

<!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>

空间旋转——Y轴代码与效果视频

5.立体呈现 – transform-style

①作用：设置元素的子元素是位于 3D 空间中还是平面中

②属性名：transform-style

③属性值：

  • flat：子级处于平面中
  • preserve-3d：子级处于 3D 空间

④呈现立体图形步骤

  1. 父元素添加transform-style: preserve-3d；
  2. 子级定位
  3. 调整子盒子的位置（位移或旋转）

⑤提示：空间内，转换元素都有自已独立的坐标轴，互不干扰

<!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;transform-style: preserve-3d;/* 旋转与案例效果无关，用来看前后移动的效果 */ /* transform: rotateY(89deg); */}.cube div {position: absolute;left: 0;top: 0;width: 200px;height: 200px;}.front {background-color: orange;transform: translateZ(100px);}.back {background-color: green;transform: translateZ(-100px);}.cube:hover {transform: rotateY(90deg);}</style></head><body><div class="cube"><div class="front">前面</div><div class="back">后面</div></div></body>
</html>

效果视频：

立体呈现 – transform-style

案例 – 3D 导航

效果视频与代码：

案例 – 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;}.nav {width: 300px;height: 40px;margin: 50px auto;}.nav ul {display: flex;}.nav li {position: relative;width: 100px;height: 40px;line-height: 40px;transition: all 0.5s;transform-style: preserve-3d;/* 为了看到橙色和绿色的移动过程，给立方体添加旋转 *//* transform: rotateX(-20deg) rotateY(30deg); */}.nav li a {position: absolute;left: 0;top: 0;display: block;width: 100%;height: 100%;text-align: center;text-decoration: none;color: #fff;}/* 立方体每个面都有独立的坐标轴，互不影响 */.nav li a:first-child {background-color: green;transform: translateZ(20px);}.nav li a:last-child {background-color: orange;transform: rotateX(90deg) translateZ(20px);}.nav li:hover {transform: rotateX(-90deg);}</style></head><body><div class="nav"><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>

6.空间转换 – 缩放

①属性

transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();

②效果视频与代码

空间转换 – 缩放

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>空间缩放</title><style>ul {margin: 0;padding: 0;list-style: none;}.nav {width: 300px;height: 40px;margin: 50px auto;}.nav li {position: relative;float: left;width: 100px;height: 40px;line-height: 40px;transition: all 0.5s;transform-style: preserve-3d;transform: scaleX(0.5);transform: scaleY(2);transform: scaleZ(3);transform: scale3d(0.5, 2, 3);}.nav li a {position: absolute;left: 0;top: 0;width: 100%;height: 100%;text-align: center;text-decoration: none;color: #fff;}.nav li a:first-child {background-color: green;transform: translateZ(20px);}.nav li a:last-child {background-color: orange;transform: rotateX(90deg) translateZ(20px);}.nav li:hover {transform: rotateX(-90deg);}</style></head><body><div class="nav"><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>

二、动画 - animation

1.动画 - animation

①过渡：实现两个状态间的变化过程

②动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

③动画体验效果视频与代码

动画体验效果视频与代码

<!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>div {width: 100px;height: 100px;background-color: pink;animation: change 1s infinite alternate;}@keyframes change {0% {transform: translate(0);}100% {transform: translate(600px);}}</style></head><body><div></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>动画实现步骤</title><style>.box {width: 200px;height: 100px;background-color: pink;animation: change 1s;}/* 动画一：宽度从200变化到800 *//* @keyframes change {from {width: 200px;}to {width: 800px;}} *//* 动画二：从 200*100 变化到 300*300 变化到800*500 *//* 百分比：表示的意思是动画时长的百分比 */@keyframes change {0% {width: 200px;height: 100px;}20% {width: 300px;height: 300px;}100% {width: 800px;height: 500px;}}</style></head><body><div class="box"></div></body>
</html>

⑤animation复合属性

<!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;/* steps：分步动画，工作中，配合精灵图实现精灵动画 */animation: change 1s steps(3);/* 如果有两个时间，第一个是动画时长，第二个是延迟时间 */animation: change 1s 2s;/* 重复次数，infinite：无限循环 */animation: change 1s 3;animation: change 1s infinite;/* alternate：反向 */animation: change 1s infinite alternate;/* 动画执行完毕时的状态， forwards：结束状态； backwards：开始状态（默认） */animation: change 1s forwards;animation: change 1s backwards;}/* 宽度 从 200 变化到 800 */@keyframes change {from {width: 200px;}to {width: 800px;}}</style></head><body><div class="box"></div></body>
</html>

⑥animation拆分写法

<!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;/* animation-play-state: paused; */}.box:hover {/* 暂停动画 */animation-play-state: paused;}/* 宽度从 200 变化到 800 */@keyframes change {0% {width: 200px;}100% {width: 800px;}}</style></head><body><div class="box"></div></body>
</html>

⑦.案例—走马灯效果

案例—走马灯效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>走马灯</title><style>* {padding: 0;margin: 0;}li {list-style: none;}img {display: block;width: 200px;}.box {width: 600px;height: 112px;border: 5px solid #000;margin: 100px auto;overflow: hidden;}.box ul {display: flex;animation: move 6s infinite linear;}/* 定义位移动画；ul使用动画；鼠标悬停暂停动画 */@keyframes move {0% {transform: translate(0);}100% {transform: translate(-1400px);}}.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><!-- 替身：填补显示区域的露白 --><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>

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>div {width: 140px;height: 140px;border: 1px solid #000;background-image: url(./images/bg.png);animation: run 1s steps(12) infinite;}@keyframes run {from {background-position: 0 0;}to {background-position: -1680px 0;}}</style>
</head>
<body><div></div>
</body>
</html>

 效果视频：

动画 – 逐帧动画

3.动画 – 多组动画

<!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>div {width: 140px;height: 140px;/* border: 1px solid #000; */background-image: url(./images/bg.png);animation: run 1s steps(12) infinite,move 3s forwards;}/* 当动画的开始状态样式 跟 盒子默认样式相同，可以省略动画开始状态的代码 */@keyframes run {/* from {background-position: 0 0; } */to {background-position: -1680px 0;} }@keyframes move {/* 0% {transform: translate(0);} */100% {transform: translate(800px);} }</style>
</head>
<body><div></div>
</body>
</html>

4.案例—全民出游 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;}.box {width: 100%;height: 100%;background: url('images/f1_1.jpg') no-repeat top center;background-size: cover;position: relative;}.cloud img {position: absolute;left: 50%;}.cloud img:nth-child(1) {top: 20px;margin-left: -260px;animation: cloud 2s linear infinite alternate;}.cloud img:nth-child(2) {top: 100px;margin-left: 380px;animation: cloud 2.5s linear infinite alternate;}.cloud img:nth-child(3) {top: 200px;margin-left: -560px;animation: cloud 3s linear infinite alternate;}.balloon {position: absolute;left: 50%;top: 20%;margin-left: -390px;animation: balloon 1.5s linear alternate infinite;}.giraffe {position: absolute;left: 50%;margin-left: 160px;top: 15%;}.text {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);animation: text 1s ease forwards;}.jump_text img {position: absolute;left: 50%;bottom: 42px;width: 100px;}.jump_text img:nth-child(1) {margin-left: -390px;animation: jump_text 0.8s infinite alternate;}.jump_text img:nth-child(2) {margin-left: -180px;animation: jump_text 0.8s 0.2s infinite alternate;}.jump_text img:nth-child(3) {margin-left: 35px;animation: jump_text 0.8s 0.4s infinite alternate;}.jump_text img:nth-child(4) {margin-left: 240px;animation: jump_text 0.8s 0.6s infinite alternate;}/* 白云动画 */@keyframes cloud {0% {transform: translateX(0px);}100% {transform: translateX(40px);}}/* 热气球动画 */@keyframes balloon {0% {transform: translateY(0px);}100% {transform: translateY(-30px);}}/* 跳动文字 */@keyframes jump_text {0% {transform: translateY(0px);}100% {transform: translateY(-30px);}}/* 文字 *//* 注意：因为transform是复合属性，所以我们要重新申明一遍translate */@keyframes text {0% {transform: translate(-50%, -50%) scale(1);}20% {transform: translate(-50%, -50%) scale(0);}40% {transform: translate(-50%, -50%) scale(1.4);}70% {transform: translate(-50%, -50%) scale(0.8);}100% {transform: translate(-50%, -50%) scale(1);}}</style></head><body><div class="box"><!-- 白云 --><div class="cloud"><img src="images/yun1.png" /><img src="images/yun2.png" /><img src="images/yun3.png" /></div><!-- 热气球 --><div class="balloon"><img src="images/san.png" /></div><!-- 长颈鹿 --><div class="giraffe"><img src="images/lu.png" /></div><!-- 文字 --><div class="text"><img src="images/font1.png" /></div><!-- 跳动文字 --><div class="jump_text"><img src="images/1.png" /><img src="images/2.png" /><img src="images/3.png" /><img src="images/4.png" /></div></div></body>
</html>

相关文章：

WEBSTORM前端 —— 第3章：移动 Web —— 第2节：空间转换、转化

目录 一、空间转换 1.空间转换 2.空间转换 – 平移 3.视距 perspective 4.空间 – 旋转 ③空间旋转——Z轴代码与效果视频 ④空间旋转——X轴代码与效果视频 ⑤空间旋转——Y轴代码与效果视频 5.立体呈现 – transform-style 案例 – 3D 导航 6.空间转换 – 缩放 …...

编程日记 2025/6/4 21:41:41

Java研学-MongoDB(一)

一 MongoDB 简介 MongoDB是一种高性能、开源的NoSQL数据库&#xff0c;采用面向文档的存储模型&#xff0c;以BSON&#xff08;Binary JSON&#xff09;格式存储数据&#xff0c;具有灵活的数据模型、强大的扩展性和丰富的功能特性&#xff0c;广泛应用于各类现代应用程序的数据…...

编程日记 2025/6/4 11:15:26

【AI面试秘籍】| 第25期：RAG的关键痛点及解决方案深度解析

今天我们来聊聊大模型领域一个非常火热的技术——RAG&#xff08;Retrieval Augmented Generation&#xff09;。RAG通过引入外部知识库&#xff0c;有效地缓解了大型语言模型&#xff08;LLM&#xff09;在处理知识密集型任务时可能出现的幻觉、知识过时等问题。然而&#xff…...

编程日记 2025/6/4 21:33:38

OpenGL、GLUT、freeGLUT 与 GLFW 的区别

在图形编程中&#xff0c;OpenGL 是最核心的渲染 API&#xff0c;但仅靠它本身无法完成窗口创建、事件处理等任务。因此&#xff0c;开发者通常会借助一些辅助库来简化开发流程。常见的库包括 GLUT、freeGLUT 和 GLFW。 本文将详细讲解这些技术之间的区别&#xff0c;并提供每…...

编程日记 2025/6/4 2:23:40

服务器带宽线路的区别（GIA、CN2、BGP、CMI等）

服务器带宽线路的区别&#xff08;GIA、CN2、BGP、CMI等&#xff09; 一、BGP线路 1. 定义与技术特点 BGP&#xff08;Border Gateway Protocol&#xff0c;边界网关协议&#xff09;是一种用于不同自治系统&#xff08;AS&#xff09;之间交换路由信息的协议&#xff0c;属…...

编程日记 2025/6/3 18:10:58

ppt一键制作：ai自动生成PPT，便捷高效超级精美！

深夜的台灯下&#xff0c;你对着杂乱的 PPT 内容反复刷新灵感&#xff0c;鼠标在字体、配色选项间来回穿梭&#xff0c;好不容易拼凑出的页面&#xff0c;却总透着浓浓的 “廉价感”&#xff1b;汇报在即&#xff0c;逻辑混乱的大纲改了又改&#xff0c;每一页感觉合适又不搭&a…...

编程日记 2025/6/4 10:18:22

多方法解决MNIST数字识别

全连接层 import torch from torchvision import datasets, transforms import torch.nn as nn import torch.optim as optim from tqdm import tqdm # 用于进度条显示 import os# 定义数据预处理（标准化+Tensor转换） transform = transforms.Compose([transforms.ToTensor…...

编程日记 2025/6/3 18:11:06

Maven（黑马）

Maven 是一个强大的项目管理和构建自动化工具&#xff0c;主要用于 Java 项目的构建、依赖管理和文档生成。它通过使用 POM&#xff08;Project Object Model&#xff09;文件来管理项目的配置和依赖关系&#xff0c;从而实现项目的自动化构建和管理。以下是 Maven 的一些核心概…...

编程日记 2025/6/3 18:11:02

CppCon 2014 学习:ODB, Advanced Weapons and Tactics

#Schema Evolution 是数据库持久化技术中的一个重要概念&#xff0c;特别是在使用像 ODB 这样的 C ORM 框架时。 展示的代码片段正是 ODB 支持的**模式演化&#xff08;Schema Evolution&#xff09;**语法示例。 什么是 Schema Evolution&#xff1f; Schema Evolution 指的…...

编程日记 2025/6/4 5:24:10

将手机网络经USB数据线和本地局域网共享给华为AP6050DN无线接入点

引言 由于最近装毕的新家所在的小区未能及时通宽带，于是家中各类无线设备如何上网就成了首要要解决的问题。 鉴于家中要联网的设备多、类型杂、支持频段也不一，总是开手机热点不是回事儿，于是就想着把手机网络引至华为AP6050DN无线接入点中，让家中所有的无线设备都能快速高…...

编程日记 2025/6/4 7:22:41

【论文解读】Deformable DETR | Deformable Transformers for End-to-End Object Detection

论文地址&#xff1a;https://arxiv.org/pdf/2010.04159 代码地址&#xff1a;https://github.com/fundamentalvision/Deformable-DETR 摘要 DETR最近被提出&#xff0c;旨在消除物体检测中许多手工设计的组件的需求&#xff0c;同时展示出良好的性能。然而&#xff0c;由于T…...

编程日记 2025/6/4 19:55:23

android 图片背景毛玻璃效果实现

图片背景毛玻璃效果实现 1 依赖 // Glide implementation("com.github.bumptech.glide:glide:4.16.0") kapt("com.github.bumptech.glide:compiler:4.16.0") implementation("jp.wasabeef:glide-transformations:4.3.0") 2 布局<com.googl…...

编程日记 2025/6/4 8:38:06

机器学习----决策树

一、决策树简介 from sklearn.tree import DecisionTreeClassifier from sklearn.tree import plot_tree 决策树是一种树形结构&#xff0c;树中每个内部节点表示一个特征上的判断&#xff0c;每个分支代表一个判断结果的输出&#xff0c;每个叶子节点代表一种分类结果。 决…...

编程日记 2025/6/4 10:03:03

LabVIEW输血袋字符智能检测系统

针对医疗行业输血袋字符检测需求&#xff0c;基于 LabVIEW 图形化开发平台与基恩士&#xff08;KEYENCE&#xff09;机器视觉硬件&#xff0c;构建高精度、高可靠性的字符在线识别系统。通过选用基恩士工业相机、光源及 NI 数据采集设备等硬件&#xff0c;结合 LabVIEW 强大的图…...

编程日记 2025/6/4 7:57:55

数据结构测试模拟题（3）

1、两个有序链表序列的合并 #include<bits/stdc.h> using namespace std;struct node{int num;node* next; };// 创建链表 node* CreatList(){int x;node *head new node(); // 创建头节点head->next NULL;node *tail head; // 尾指针初始指向头节点while…...

编程日记 2025/6/3 20:07:38

理解频域滤波

1 频域滤波基础 对一幅数字图像&#xff0c;基本的频率滤波操作包括&#xff1a; 1&#xff09;将图像变换到频率域&#xff1b; 2&#xff09;根据需要修改频率域数值&#xff1b; 3&#xff09;反变换到图像域。 使用公式表达为 &#xff0c; H(u,v) 为滤波器&#xff08;滤…...

编程日记 2025/6/4 21:00:49

Telerik生态整合：Kendo UI for Angular组件在WinForms应用中的深度嵌入（一）

Telerik DevCraft包含一个完整的产品栈来构建您下一个Web、移动和桌面应用程序。它使用HTML和每个.NET平台的UI库&#xff0c;加快开发速度。Telerik DevCraft提供完整的工具箱&#xff0c;用于构建现代和面向未来的业务应用程序&#xff0c;目前提供UI for ASP.NET MVC、Kendo…...

编程日记 2025/6/3 21:42:03

古老的传说（Player、Stage）是否还能在蓝桥云课ROS中重现-250601（失败）

古老的传说是否还能在蓝桥云课ROS中重现-250601 经典复现何其难&#xff0c;百分之二就凉凉&#xff01; 古老的传说 那是很久很久以前的故事……上个世纪的一个机器人项目 Player、Stage这个项目最早起源于1999年&#xff0c;由美国南加州大学机器人研究实验室开发&#xff0…...

编程日记 2025/6/4 23:20:55

InfluxQL 数据分析实战：聚合、过滤与关联查询全解析

InfluxQL 作为时序数据库的专用查询语言&#xff0c;在处理时间序列数据时展现出独特优势。本文深入探讨 聚合计算、数据过滤和跨测量关联 三大核心操作&#xff0c;通过真实代码示例展示如何从海量时序数据中提取关键洞察。文中涵盖从基础平均值计算到复杂多维度分析的完整流程…...

编程日记 2025/6/4 0:27:28

Qt font + ToolTip + focusPolicy + styleSheet属性（5）

文章目录 font属性API接口直接在Qt Designer编辑图形化界面通过纯代码的方式修改文字属性 ToolTip属性API接口代码演示 focusPolicy属性概念理解API接口通过编辑图形化界面演示 styleSheet属性概念理解通过编辑图形化界面展示代码 图形化界面的方式展示&#xff08;夜间/日间模…...

编程日记 2025/6/2 17:01:42

APM32主控键盘全功能开发实战教程：软件部分

APM32主控键盘全功能开发实战教程&#xff1a;从零基础到RGB矩阵高级玩法 &#x1f525; 前言&#xff1a;随着机械键盘DIY风潮兴起&#xff0c;国产APM32芯片因其高性价比和与STM32的完美兼容性&#xff0c;正逐渐成为键盘开发主控的新宠。本文将手把手带你从最基础的环境搭建…...

编程日记 2025/6/4 9:06:34

docker 部署 gin

编译与执行 ✅「静态编译语言 生成原生二进制文件 操作系统直接执行」 Go 语言之所以在工程部署场景中大受欢迎的核心优势&#xff1a;它直接编译成原生二进制可执行文件&#xff08;binary executable&#xff09;。 &#x1f527; Go 是“静态编译语言”&#xff08;编译型…...

编程日记 2025/6/4 3:52:23

十三: 神经网络的学习

这里所说的“学习”是指从训练数据中自动获取最优权重参数的过程。为了使神经网络能进行学习&#xff0c;将导入损失函数这一指标。而学习的目的就是以该损失函数为基准&#xff0c;找出能使它的值达到最小的权重参数。为了找出尽可能小的损失函数的值&#xff0c;我们将介绍利…...

编程日记 2025/6/4 1:20:23

Qt OpenGL编程常用类

Qt提供了丰富的类来支持OpenGL编程，以下是常用的Qt OpenGL相关类： 一、QOpenGLWidget 功能：用于在 Qt 应用程序中嵌入 OpenGL 渲染的窗口部件。替代了旧版的QGLWidget。提供了OpenGL上下文和渲染表面。 继承关系：QWidget → QOpenGLWidget 属性与方法： QOpenGLWidget 属…...

编程日记 2025/6/3 19:24:00

数据结构 --- 顺序表

顺序表是用一段物理地址连续的存储单元依次存储数据元素的线性结构&#xff0c;一般情况下采用数组存储&#xff0c;在数组上完成数据的增删查改 顺序表分为&#xff1a;静态顺序表、动态顺序表 一.静态顺序表 #define N 7 typedef int SLDataType;typedef struct Seqlist {…...

编程日记 2025/6/4 1:58:01

MySQL高级查询技巧：分组、聚合、子查询与分页【MySQL系列】

本文将深入探讨 MySQL 高级查询技巧&#xff0c;重点讲解 GROUP BY、HAVING、各种聚合函数、子查询以及分页查询&#xff08;LIMIT 语法&#xff09;的使用。文章内容涵盖实际应用中最常见的报表需求和分页实现技巧&#xff0c;适合有一定 SQL 基础的开发者进一步提升技能。 一…...

编程日记 2025/6/5 1:33:12

无人机多旋翼倾转动力测试系统-适用于（eVTOL开发、缩比模型测试、科研教育）

在倾转旋翼无人机、垂直起降&#xff08;VTOL&#xff09;及混合动力飞行器的研发中&#xff0c;动力系统在垂直-水平模式切换时的动态性能至关重要。LY-QZ-F4多旋翼倾转动力测试系统是全球首款专为倾转四旋翼设计的多自由度动力测试平台&#xff0c;融合高精度传感、动态倾转模…...

编程日记 2025/6/3 20:58:19

.NET8入门：14.ASP.NET Core MVC进阶——Model

上一篇文章我们了解了一下MVC在ASP.NET8中的一些基础概念&#xff0c;接下来深入了解一下ASP.NET Core MVC中Model的一些特性和用法。 Model 职责 Model 代表应用程序的核心数据和业务逻辑部分。它负责&#xff1a; 封装业务数据&#xff1a;表示应用程序中的实体&#xff0c;…...

编程日记 2025/6/4 23:13:09

latex figure Missing number, treated as zero. ＜to be read again＞

\begin{figure}[h] \centering \includegraphics[width\linewidth]{pictures/architecture.pdf} \caption{Typical architecture.} \label{fig:architecture} \end{figure}&#xff0c; 我在编译latex&#xff0c;这段代码报错&#xff0c; Missing number, treated …...

编程日记 2025/6/3 23:30:54

java CompletableFuture创建异步任务(Completable异步+ExecutorService线程池)

文章目录 前置自定义线程池使用 CompletableFuture 创建异步任务 前置 来自 import java.util.concurrent.CompletableFuture; 自定义线程池 推荐根据业务需求配置 ExecutorService pool new ThreadPoolExecutor(10, // 核心线程数20, // 最大线程数60L, TimeUnit.SECONDS…...

编程日记 2025/6/4 13:07:04