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

【CSS3】化神篇

news 来源：原创 2025/8/16 0:44:19

平面转换

作用：为元素添加动态效果，一般与过渡配合使用

概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）

平面转换又叫 2D 转换

属性名：transform

代码示例：

<!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>div{margin: 100px 0;width: 100px;height: 100px;background-color: #e08b8b;transition: all 1s;}div:hover{transform: translate(700px) rotate(360deg) scale(2) skew(360deg);}</style>
</head>
<body><div></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 153147

平移

属性名：transform: translate(X轴移动距离, Y轴移动距离);

属性值：

像素单位数值
百分比（参照盒子自身尺寸计算结果）
正负均可

代码示例：

<!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>.father{width: 500px;height: 300px;margin: 100px auto;border: 1px solid black;}.son{width: 200px;height: 100px;background-color: antiquewhite;transition: all 0.5s;}.father:hover .son{transform: translate(150%,200%);}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 154956

注意事项：

translate() 只写一个值，表示沿着 X 轴移动
单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()

旋转

属性名：transform: rotate(旋转角度);

属性值：

角度单位是 deg
取值正负均可
取正顺时针旋转，取负逆时针旋转

代码示例：

<!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>img{width: 200px;transition: all 1s;}img:hover{transform: rotate(360deg);}</style>
</head>
<body><img src="./img/3.jpg" alt="">
</body>
</html>

结果如下：

屏幕录制 2025-03-13 162633

改变旋转原点

默认情况下，旋转远点是盒子中心点

属性名：transform-origin: 水平原点位置垂直原点位置;

属性值：

方位名称（left、top、right、bottom、center）
像素单位数值
百分比

代码示例：

<!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>img{width: 200px;transition: all 1s;transform-origin: right bottom;}img:hover{transform: rotate(360deg);}</style>
</head>
<body><img src="./img/3.jpg" alt="">
</body>
</html>

结果如下：

屏幕录制 2025-03-13 163957

多重转换

先平移再旋转

属性名：transform: translate() rotate();

代码示例：

<!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>div{width: 1200px;height: 200px;border: 1px solid black;}img{width: 200px;transition: all 4s;}div:hover img{transform: translateX(500%) rotate(360deg);}</style>
</head>
<body><div><img src="./img/4.jpg" alt=""></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 165216

注意事项：

不能先旋转再平移，因为旋转会改变坐标轴向
复合属性不能分开写，否则后面的属性会覆盖前面的属性

缩放

属性名：

transform: scale(缩放倍数);
transform: scale(X轴缩放倍数, Y轴缩放倍数);

属性值：

通常只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放
取值大于 1 表示放大，取值小于 1 表示缩小

代码示例：

<!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>div{width: 200px;height: 143px;margin: 100px auto;}img{width: 200px;transition: all 4s;}div:hover img{transform: scale(2);}</style>
</head>
<body><div><img src="./img/4.png" alt=""></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 171831

倾斜

属性名：transform: skew();

属性值：

角度度数 deg
取正向左倾斜，取负向右倾斜

代码示例：

<!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>div{width: 200px;height: 143px;margin: 100px auto;}img{width: 200px;transition: all 2s;}div:hover img{transform: skew(30deg)}</style>
</head>
<body><div><img src="./img/4.png" alt=""></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 174606

渐变

渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景

线性渐变

属性名：

background-image: linear-gradient(渐变方向,颜色1 终点位置,颜色2 终点位置,......
);

属性值：

渐变方向：（可选）
- to 方位名词
- 角度度数
终点位置：（可选）
- 百分比

代码示例：

<!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>div{width: 200px;height: 200px;background-color: #a0adf7;background-image: linear-gradient(45deg, red,#f8a4a4,#a0adf7);}</style>
</head>
<body><div></div>
</body>
</html>

结果如下：
在这里插入图片描述

径向渐变

作用：给按钮添加高光效果

属性名：

background-image: radial-gradient(半径 at 圆心位置,颜色1 终点位置,颜色2 终点位置,......
);

属性值：

半径可以是两条，则为椭圆
圆心位置取值：像素单位数值/百分比/方位名词

代码示例：

<!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>div{width: 100px;height: 100px;background-color: pink;border-radius: 50%;background-image: radial-gradient(50px at center center,red,pink);}button{width: 100px;height: 40px;background-color: purple;border: 0;border-radius: 5px;color: white;background-image: radial-gradient(30px at center center,rgba(255,255,255,0.2),transparent);}</style>
</head>
<body><div></div><button>按钮</button>
</body>
</html>

结果如下：
在这里插入图片描述

空间转换

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

空间转换也叫 3D 转换

属性：transform

平移

属性名：

transform: translate3d(x,y,z);
transform: translateX();
transform: translateY();
transform: translateZ();

属性值：

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

代码示例：

<!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>.box{width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5s;}.box:hover{transform: translate3d(100px,200px,300px);}</style>
</head>
<body><div class="box"></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 194159

注意事项：默认无法观察 Z 轴平移效果

视距

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

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

属性名：perspective: 视距;

属性值：

添加给父级，取值范围 800-1200

代码示例：

<!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>.father{perspective: 1000px;}.son{width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5;}.son:hover{transform: translateZ(-300px);}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 195356

旋转

属性名：

transform: rotateZ() 沿着 Z 轴旋转

transform: rotateX() 沿着 X 轴旋转

transform: rotateY() 沿着 Y 轴旋转

transform: rotate3d(x,y,z,角度度数); x，y，z 取值为 0-1 之间的数字

代码示例：

<!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>div{width: 300px;margin: 100px auto;perspective: 1000px;}img{width: 200px;transition: all 2s;}.d1 img:hover{transform: rotateZ(360deg);}.d2 img:hover{transform: rotateX(60deg);}.d3 img:hover{transform: rotateY(60deg);}</style>
</head>
<body><div class="d1"><img src="./img/3.jpg" alt=""></div><div class="d2"><img src="./img/1.png" alt=""></div><div class="d3"><img src="./img/2.png" alt=""></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 201450

左手法则

根据旋转方向确定取值正负

左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向
在这里插入图片描述

立体呈现

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

属性名：transform-style

属性值：

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

呈现立体图形步骤：

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

<!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>.cube{position: relative;width: 200px;height: 200px;margin: 100px auto;/* background-color: pink; */transition: all 1s;transform-style: preserve-3d;}.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>

结果如下：

屏幕录制 2025-03-13 213518

缩放

属性名：

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>Document</title><style>.cube{position: relative;width: 200px;height: 200px;margin: 100px auto;/* background-color: pink; */transition: all 4s;transform-style: preserve-3d;transform: scale3d(1.5,2,3);}.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: rotate3d(1,1,1,90deg);}</style>
</head>
<body><div class="cube"><div class="front">前面</div><div class="back">后面</div></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 220517

动画

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

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

代码示例：

<!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>.d1{width: 1000px;height: 200px;border: 1px solid black;}.d2{width: 200px;height: 200px;background-color: pink;animation: change 1s infinite alternate;}@keyframes change {0% {transform: translate(0);}100% {transform: translate(800px);}}</style>
</head>
<body><div class="d1"><div class="d2"></div></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 221903

使现步骤

定义动画

两个状态

@keyframes 动画名称 {from {}to {}
}

多个状态

@keyframes 动画名称 {0% {}10% {}......100% {}
}

使用动画

animation: 动画名称动画花费时长;

代码示例：

<!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>div{width: 200px;height: 200px;background-color: pink;animation: change 10s;}@keyframes change {0% {width: 200px;height: 200px;}25% {width: 400px;height: 200px;}75% {width: 400px;height: 400px;}100% {border-radius: 50%;}}</style>
</head>
<body><div></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 235715

animation 复合属性

animation: 动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态;

速度曲线：
- linear：匀速运动
- steps()：括号里填数字，表示分几步完成动画
重复次数：
- infinite：无限循环重复播放
动画方向：
- alternate：反向执行
执行完毕时状态：
- backwards：开始状态
- forwards：结束状态

代码示例：

<!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>.box{width: 200px;height: 100px;background-color: pink;animation:  change 1s linear 1s 3 alternate forwards;}@keyframes change {from {width: 200px;}to {width: 800px;}}</style>
</head>
<body><div class="box"></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-14 002430

注意事项：

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

animation 属性拆分

属性	作用	取值
`animation-name`	动画名称
`animation-duration`	动画时长
`animation-delay`	延迟时间
`animation-fill-mode`	动画执行完毕时状态	forwards：最后一帧状态 backwards：第一帧状态
`animation-timing-function`	速度曲线	steps (数字)：逐帧动画
`animation-iteration-count`	重复次数	infinite 为无限循环
`animation-direction`	动画执行方向	alternate 为反向
`animation-play-state`	暂停动画	paused 为暂停，通常配合:hover 使用

逐帧动画

核心原理：

steps() 逐帧动画
CSS 精灵图

精灵动画制作步骤：

准备显示区域：盒子尺寸与一张精灵小图尺寸相同
定义动画：移动背景图（移动距离 = 精灵图宽度）
使用动画：strps(N)，N 与精灵小图个数相同

代码示例：

<!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>div{width: 140px;height: 140px;border: 1px solid black;background-image: url(./img/01.png);animation: run 1s steps(12) infinite;}</style>
</head>
<body><div></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-14 144049

多组动画

语法格式：

animation: 动画1,动画2,......
;

代码示例：

<!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>div{width: 140px;height: 140px;/* border: 1px solid black; */background-image: url(./img/01.png);animation: run 1s steps(12) infinite,move 5s linear 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>

结果如下：

屏幕录制 2025-03-14 144234

【CSS3】化神篇

目录平面转换平移旋转改变旋转原点多重转换缩放倾斜渐变线性渐变径向渐变空间转换平移视距旋转立体呈现缩放动画使现步骤animation 复合属性animation 属性拆分逐帧动画多组动画平面转换作用：为元素添加动态效果，一般与过渡配合使用概念&#x…...

编程日记 2025/8/16 0:44:19

【C/C++算法】从浅到深学习--- 前缀和算法（图文兼备 + 源码详解）

绪论：冲击蓝桥杯一起加油！！ 每日激励：“不设限和自我肯定的心态：I can do all things。 — Stephen Curry” 绪论： 本章将使用八道题由浅到深的带你了解并基本掌握前缀和思想，以及前缀和的基…...

编程日记 2025/8/15 16:21:21

VIC模型率定验证

在气候变化问题日益严重的今天，水文模型在防洪规划，未来预测等方面发挥着不可替代的重要作用。目前，无论是工程实践或是科学研究中都存在很多著名的水文模型如SWAT/HSPF/HEC-HMS等。虽然，这些软件有各自的优点；但是&am…...

编程日记 2025/8/16 0:40:05

二叉树的性质和实现

二叉树开端我们要理解二叉树我们可以先看看什么是树，如图这个树虽然没有什么叶子，不是很好看，但是用在这里刚刚好，我们从局部来看它，随便挑一根树枝， 大概是这样，由一根粗的的主干和一些细的…...

编程日记 2025/8/15 8:09:33

【Azure 架构师学习笔记】- Azure Databricks (21) --费用相关

本文属于【Azure 架构师学习笔记】系列。本文属于【Azure Databricks】系列。接上文【Azure 架构师学习笔记】- Azure Databricks (20) --Delta Live Table 建议前言 Databricks是很强大的工具和集成平台，但是随着越来越多地使用它，就没办法必须去面…...

编程日记 2025/8/16 0:41:11

StarRocks + Paimon 在阿里集团 Lakehouse 的探索与实践

作者： 范振: 阿里云计算平台开源 OLAP 负责人，StarRocks 社区 Champion 翁才智: 阿里云技术专家，Apache Paimon PMC Member 导读：阿里集团在推进湖仓一体化建设过程中，依托 StarRocks 强大的 OLAP 查询能力与 Paimon…...

编程日记 2025/8/12 7:04:05

OTP单片机调试工具之—单线数据编码

OTP单片机调试工具在实现过程中离不开单线数据的传输，那么使用哪一种方式的数据编码会比较好呢？ 我所了解的主要有以下三种： 1.UART（串口），这种方式在单片机和pc之间进行传输都非常常见，效率比较…...

编程日记 2025/8/16 0:40:06

你的完美主义：从缺陷到超能力

所属专栏：《逻辑辨证系列》前情回顾： 《完美还是完成》（一）：完成还是完美—完成大于完美时间、机会、情绪成本先完成 … 本期： 《完美还是完成》（二）：你的完美主…...

编程日记 2025/8/15 17:37:34

zsh: command not found: adb 报错问题解决

哈喽小伙伴们大家好，我是小李，今天，我满怀信心想要在本地跑一下pda,然而， what? 居然报错了！！别逗我啊！ 好吧，究其原因：没有配置好sdk 那就配呗。首先，…...

编程日记 2025/8/16 0:39:33

应急响应靶机练习-Linux2

1.背景前景需要：看监控的时候发现webshell告警，领导让你上机检查你可以救救安服仔吗！！ 挑战内容： （1）提交攻击者IP （2）提交攻击者修改的管理员密码(明文) （…...

编程日记 2025/8/13 16:11:18

进程间通信--匿名管道

进程间通信介绍进程间通信目的数据传输：一个进程需要将它的数据发送给另一个进程资源共享：多个进程之间共享同样的资源。通知事件：一个进程需要向另一个或一组进程发送消息，通知它（它们）发生了某种事件&…...

编程日记 2025/8/12 7:59:47

ctfshow-xxs-316-333-wp

316.反射型 XSS（-326都是反射型） js恶意代码是存在于某个参数中，通过url后缀进行get传入，当其他用户点进这个被精心构造的url链接时，恶意代码就会被解析，从而盗取用户信息。来看题，先简单测试…...

编程日记 2025/8/11 14:24:53

顺序表和链表的对比（一）

前言今天给小伙伴们分享的是在数据结构中顺序表和链表的对比。它们在计算机科学和软件开发中具有广泛的应用，是理解更复杂数据结构（如栈、队列、树、图等）的基础。这次将会给大家从定义初始化，以及功能增删查改上进行详细对比&a…...

编程日记 2025/8/12 2:11:36

蓝思科技冲刺港股上市，双重上市的意欲何为？

首先，蓝思科技冲刺港股上市，这一举措是其国际化战略进入实质性阶段的重要标志。通过港股上市，蓝思科技有望进一步拓宽融资渠道，这不仅能够为公司带来更加多元化的资金来源，还能够降低对单一市场的依赖风险，…...

编程日记 2025/8/15 4:44:45

【C++项目实战】校园公告搜索引擎：完整实现与优化指南

🎬 个人主页：谁在夜里看海. 📖 个人专栏：《C系列》《Linux系列》《算法系列》 ⛰️ 道阻且长，行则将至目录 📚一、项目概述 📖1.项目背景 📖2.主要功能 📖3.界面展…...

编程日记 2025/8/12 21:30:12

C语言每日一练——day_8

引言针对初学者，每日练习几个题，快速上手C语言。第八天。（连续更新中） 采用在线OJ的形式什么是在线OJ？ 在线判题系统（英语：Online Judge，缩写OJ）是一种在编程竞赛中用…...

编程日记 2025/8/4 5:42:47

单片机农业大棚浇花系统

标题:单片机农业大棚浇花系统内容:1.摘要本文针对传统农业大棚浇花方式效率低、精准度差的问题，提出了一种基于单片机的农业大棚浇花系统。该系统以单片机为核心控制器，通过土壤湿度传感器实时采集土壤湿度数据，并将数据传输至单片机进行处…...

编程日记 2025/8/13 8:07:55

Kubernetes 单节点集群搭建

Kubernetes 单节点集群搭建教程本人尝试基于Ubuntu搭建一个单节点K8S集群，其中遇到各种问题，最大的问题就是网络，各种镜像源下载不下来，特此记录！注意：文中使用了几个镜像，将看来可能失效导致安…...

编程日记 2025/8/12 19:51:07

windows安装两个或多个JDK，并实现自由切换

我用两个JDK来做演示，分别是JDK8和JDK17(本人已安装JDK8，所以这里只演示JDK17的安装)。 1、下载JDK17安装 Java Downloads | Oracle 2、安装JDK17,这里忽略。直接双击软件，点击下一步就可以。 3、配置环境变量在系统变量中新建一个CLASSP…...

编程日记 2025/8/11 11:01:13

如何打包数据库mysql数据，并上传到虚拟机上进行部署？

1.连接数据库，使得我们能看到数据库信息，才能进行打包上传 2. 3. 导出结果如下，是xml文件 4.可以查询每个xml文件的属性，确保有大小，这样才是真实导出 5跟着黑马，新建文件夹，并且把对应的东西放…...

编程日记 2025/8/14 22:01:52

fastapi +angular迷宫求解可跨域

说明：我计划使用fastapi angular，实现迷宫路径生成与求解后端功能包括： 1.FastAPI搭建RESTful接口。写两个接口， 1.1生成迷宫， 1.2求解路径前端功能包括 1.根据给定的长宽值，生成迷宫 2.点击按钮&…...

编程日记 2025/8/10 21:38:14

CobaltStrike详细使用及Linux上线

1、工具准备 cs工具将teamserver.zip放进服务端给必要文件增加可执行文件( 执行时会有提示 )服务端启动服务监听 sudo ./teamserver <IP地址> <密码> [c2配置文件]客户端直接连接即可端口默认：50050主机：服务端ip地址2、基础配置启动监听…...

编程日记 2025/8/14 0:22:10

WSL2 Ubuntu安装GCC不同版本

WSL2 Ubuntu安装GCC不同版本介绍安装gcc 7.1方法 1：通过源码编译安装 GCC 7.1步骤 1：安装编译依赖步骤 2：下载 GCC 7.1 源码步骤 3：配置和编译步骤 4：配置环境变量步骤 5：验证安装方法 2：通过…...

编程日记 2025/8/14 15:03:20

WPF CommunityToolkit.MVVM库的简单使用

CommunityToolkit.MVVM 是 .NET 社区工具包中的一部分，它为实现 MVVM（Model-View-ViewModel）模式提供了一系列实用的特性和工具，能帮助开发者更高效地构建 WPF、UWP、MAUI 等应用程序。以下是关于它的详细使用介绍： 1…...

编程日记 2025/8/10 17:09:46

4个 Vue 路由实现的过程

大家好，我是大澈！一个喜欢结交朋友、喜欢编程技术和科技前沿的老程序员👨🏻‍💻，关注我，科技未来或许我能帮到你！ Vue 路由相信朋友们用的都很熟了，但是你知道 Vue 路由…...

编程日记 2025/8/12 10:54:15

Compose 实践与探索十 —— 其他预先处理的 Modifier

1、PointerInputModifier PointerInputModifier 用于定制触摸（包括手指、鼠标、悬浮）反馈算法，实现手势识别。 1.1 基本用法最简单的使用方式就是通过 Modifier.clickable() 响应点击事件： Box(Modifier.size(40.dp).backgro…...

编程日记 2025/8/11 11:46:25

基于Python的天气预报数据可视化分析系统-Flask+html

开发语言：Python框架：flaskPython版本：python3.8数据库：mysql 5.7数据库工具：Navicat11开发软件：PyCharm 系统展示系统登录可视化界面天气地图天气分析历史天气用户管理摘要本文介绍了基于大数据…...

编程日记 2025/8/15 8:09:33

“消失的中断“

“消失的中断” 1. 前言在嵌入式开发过程中，中断必不可少。道友们想必也经常因为中断问题头疼不已，今天来说说一个很常见的问题，“消失的中断”。最近项目在使用第三方MCAL的时候，就遇到了I2C中断丢失的问题，排查起…...

编程日记 2025/8/11 23:56:36

对C++面向对象的理解

C的面向对象编程（OOP）是其核心特性之一，通过类（Class）和对象（Object）实现数据和行为的封装，支持继承、多态和抽象等核心概念。以下是关键点解析： 1. 类（Class…...

编程日记 2025/8/14 15:37:06

代码随想录-训练营-day52

97. 小明逛公园 (kamacoder.com) #include<iostream> #include<vector> using namespace std; int main(){int n,m,u,v,w;cin>>n>>m;vector<vector<vector<int>>> grid(n1,vector<vector<int>>(n1,vector<int>(n1…...

编程日记 2025/8/10 21:31:01

Java File 类详解

1. 概述 File 类是 Java 提供的用于文件和目录路径名的抽象表示。它能够用于创建、删除、查询文件和目录的信息，但不用于读写文件内容。如果需要对文件进行读写，可以结合 FileReader、FileWriter、BufferedReader 等类来完成。 2. File 类的构造方法 …...

编程日记 2025/8/11 20:17:04

JS实现省份地级市的选择

JS实现省份地级市的选择效果展示： 代码实现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><ti…...

编程日记 2025/8/14 21:17:19

【鸿蒙开发】Hi3861学习笔记-Visual Studio Code安装(New)

00. 目录文章目录 00. 目录01. Visual Studio Code概述02. Visual Studio Code下载03. Visual Studio Code安装04. Visual Studio Code插件05. 附录 01. Visual Studio Code概述 vscode是一种简化且高效的代码编辑器，同时支持诸如调试，任务执行和版本管…...

编程日记 2025/8/15 15:50:32

记录致远OA服务器硬盘升级过程

前言日常使用中OA系统突然卡死，刷新访问进不去系统，ping服务器地址正常，立马登录服务器检查，一看磁盘爆了。我大脑直接萎缩了，谁家OA系统配400G的空间啊，过我手的服务器没有50也是30台，还是…...

编程日记 2025/8/13 13:06:29

计算机网络-网络规划与设计

基本流程需求分析—》通信规范分析—》逻辑网络设计—》物理网络设计—》实施阶段需求分析： 确定需求，包括：业务需求、用户需求、应用需求、计算机平台需求、网络通信需求等。产物：需求规范通信规范分析： 现有…...

编程日记 2025/8/15 1:16:36

C#opencv 遍历图像中所有点不在圆范围内的点变为黑色,在圆范围内的保持原色

C#opencv 遍历图像中所有点不在圆范围内的点变为黑色,在圆范围内的保持原色安装 Install-Package OpenCvSharp4 Install-Package OpenCvSharp4.Windows 普通实现 using System; using System.Collections.Generic; using System.Linq; using OpenCvSharp; // 添加OpenCV引用…...

编程日记 2025/8/12 15:45:44

精通游戏测试笔记（持续更新）

第一章、游戏测试的两条规则不要恐慌不要将这次发布当作最后一次发布不要相信任何人把每次发布当作最后一次发布第二章：成为一名游戏测试工程师...

编程日记 2025/6/28 9:49:46

Linux内核，mmap_pgoff在mmap.c的实现

1. mmap_pgoff的系统调用实现如下 SYSCALL_DEFINE6(mmap_pgoff, unsigned long, addr, unsigned long, len,unsigned long, prot, unsigned long, flags,unsigned long, fd, unsigned long, pgoff) {return ksys_mmap_pgoff(addr, len, prot, flags, fd, pgoff); }2. ksys_mma…...

编程日记 2025/8/12 16:30:01

深度揭秘：蓝耘 Maas 平台如何重塑深度学习格局

目录前言深度学习：技术基石与发展脉络蓝耘 Maas 平台：深度学习的强大助推器 1. 高性能算力支撑 2. 丰富的模型支持 3. 便捷的开发体验 4. 完善的安全保障代码示例：蓝耘 Maas 平台上的深度学习实践 1. 注册与登录 2. 代码实现 …...

编程日记 2025/8/14 14:15:52

深入解析操作系统进程控制：从地址空间到实战应用

引言想象这样一个场景： 你的游戏本同时运行着《赛博朋克2077》、Chrome浏览器和Discord语音突然游戏崩溃，但其他应用依然正常运行此时你打开任务管理器，发现游戏进程已经消失，但内存占用却未完全释放这背后涉及的关键机制…...

编程日记 2025/8/6 6:12:04

网络空间安全（33）MSF漏洞利用

前言 Metasploit Framework（简称MSF）是一款功能强大的开源安全漏洞利用和测试工具，广泛应用于渗透测试中。MSF提供了丰富的漏洞利用模块，允许安全研究人员和渗透测试人员利用目标系统中的已知漏洞进行攻击。一、漏洞利用模块&…...

编程日记 2025/8/13 21:34:23

《Electron 学习之旅：从入门到实践》

前言 Electron 简介 Electron 是由 GitHub 开发的一个开源框架，基于 Chromium 和 Node.js。它允许开发者使用 Web 技术（HTML、CSS、JavaScript）构建跨平台的桌面应用程序。 Electron 的优势跨平台：支持 Windows、macOS 和 Linux…...

编程日记 2025/8/11 13:36:50