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

【CSS3】化神篇

article 2026/3/2 17:57:58

平面转换

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

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

平面转换又叫 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…...

编程日记 2026/2/18 0:19:46

Unity音频混合器如何暴露参数

音频混合器是Unity推荐管理音效混音的工具，那么如何使用代码对它进行管理呢？ 首先我在AudioMixer的Master组中创建了BGM和SFX的分组，你也可以直接用Master没有问题。这里我以BGM为例，如果要在代码中进行使用就需要将参数暴露出去…...

编程日记 2026/3/1 23:19:18

Vue keepalive学习用法

在Vue中，<keep-alive>的include属性用于指定需要缓存的组件，其实现方式如下： 1. 基本用法 • 字符串形式：通过逗号分隔组件名称，匹配到的组件会被缓存。 <keep-alive include"ComponentA,ComponentB&…...

编程日记 2026/2/21 23:14:14

5-1 使用ECharts将MySQL数据库中的数据可视化

方法一：使用Python Flask框架搭建API 对于技术小白来说，使用ECharts将MySQL数据库中的数据可视化需要分步骤完成。以下是详细的实现流程： 一、技术架构‌ 后端服务‌：使用Python Flask框架搭建API（简单易学&#xff…...

编程日记 2026/2/20 15:45:49

构建下一代AI Agent：自动化开发与行业落地全解析

1. 下一代AI Agent：概念与核心能力核心能力描述技术支撑应用价值自主性独立规划与执行任务，无需持续人工干预决策树、强化学习、目标导向规划减少人工干预，提高任务执行效率决策能力评估多种方案并选择最优解决方案贝叶斯决策、多目标优化、…...

编程日记 2026/3/1 16:47:48

如何理解分布式光纤传感器？

关键词：OFDR、分布式光纤传感、光纤传感器分布式光纤传感器是近年来备受关注的前沿技术，其核心在于将光纤本身作为传感介质和信号传输介质，通过解析光信号在光纤中的散射效应，实现对温度、应变、振动等物理量的连续、无盲区、高…...

编程日记 2026/2/18 15:34:32

1、如何从控制台获取用户输入 import java.util.Scanner;public class Main {public static void main(String[] args) {// 石头剪刀布的思路// 1 2 3 石头剪刀布Scanner scanner new Scanner(System.in);System.out.println("请出拳：1.石头 2.剪刀 3.布【…...

编程日记 2026/2/15 2:33:33

【一起来学kubernetes】21、Secret使用详解

Secret 的详细介绍 Secret 是 Kubernetes 中用于存储和管理敏感信息（如密码、令牌、密钥等）的资源对象。Secret的设计目的是为了安全地存储和传输敏感信息，如密码、API密钥、证书等。这些信息通常不应该直接硬编码在配置文件或镜像中&#x…...

编程日记 2026/2/20 16:00:16

css重点知识汇总（一）

css重点知识汇总（一） 引入css的不同方式 link 通过src来获取相应的css资源。除了获取css之外还可以获取其他资源，例如js在页面载入是同步下载可以通过js对dom操作来改变css import css3引入的新方法只能引入css资源需要页面完全载入后才…...

编程日记 2026/2/15 22:01:50

PMP-项目运行环境

你好！我是 Lydia-穎穎 ♥感谢你的陪伴与支持 ~~~ 欢迎一起探索未知的知识和未来，现在lets go go go!!! 1. 影响项目的要素项目存在在不同的环境下，环境对于项目的交付产生不同的影响。需了解环境对于项目的影响，采取相应措施应对…...

编程日记 2026/3/1 7:45:51

shell 脚本搭建apache

#!/bin/bash # Set Apache version to install ## author: yuan# 检查外网连接 echo "检查外网连接..." ping www.baidu.com -c 3 > /dev/null 2>&1 if [ $? -eq 0 ]; thenecho "外网通讯良好！" elseecho "网络连接失败&#x…...

编程日记 2026/2/27 21:39:16

Huawei 鲲鹏（ARM/Aarch64）服务器安装KVM虚拟机（非桌面视图）

提出问题因需要进行ARM架构适配，需要在Huawei Taishan 200k（CPU： Kunpeng 920 5231K）上，创建几台虚拟机做为开发测试环境。无奈好久没搞了，看了一下自己多年前写的文章：Huawei 鲲鹏&#xf…...

编程日记 2026/2/24 6:36:17

《Python实战进阶》No28: 使用 Paramiko 实现远程服务器管理

No28: 使用 Paramiko 实现远程服务器管理摘要在现代开发与运维中，远程服务器管理是必不可少的一环。通过 SSH 协议，我们可以安全地连接到远程服务器并执行各种操作。Python 的 Paramiko 模块是一个强大的工具，能够帮助我们实现自动化任务&…...

编程日记 2026/2/19 21:02:58

备赛蓝桥杯之第十六届模拟赛3期职业院校组

提示：本篇文章仅仅是作者自己目前在备赛蓝桥杯中，自己学习与刷题的学习笔记，写的不好，欢迎大家批评与建议由于个别题目代码量与题目量偏大，请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题&#xff0…...

编程日记 2026/2/25 3:59:00

【Kafka】深入了解Kafka

集群的成员关系 Kafka使用Zookeeper维护集群的成员信息。每一个broker都有一个唯一的标识，这个标识可以在配置文件中指定，也可以自动生成。当broker在启动时通过创建Zookeeper的临时节点把自己的ID注册到Zookeeper中。broker、控制器和其他一些动态系…...

编程日记 2026/2/14 21:54:01

C++特性——RAII、智能指针

RAII 就像new一个需要delete，fopen之后需要fclose，但这样会有隐形问题（忘记释放）。RAII即用对象把这个过程给包起来，对象构造的时候，new或者fopen，析构的时候delete. 为什么需要智能指针对于…...

编程日记 2026/2/20 20:50:56

C++异常处理时的异常类型抛出选择

在 C 中选择抛出哪种异常类型，主要取决于错误的性质以及希望传达的语义信息。以下是一些指导原则，帮助在可能发生异常的地方选择合适的异常类型进行抛出： 1. std::exception 适用场景：作为所有标准异常的基类，std::e…...

编程日记 2026/1/25 5:07:30

elsticsearch 通过reindex修改shards

elasticsearch reindex 索引。背景： 索引test1 reindex到test2 修改sharding数量程序是通过别名test1_alias访问索引 1、创建目标索引test2 索引需要手动提前创建自动创建可能会有mapping 不一致性的风险。 The destination should be configured as wanted …...

编程日记 2026/1/9 17:09:37

CentOS系类普通挂载磁盘挂载命令

检查磁盘是否有分区 lsblk如果 vdb 下面没有分区（比如 vdb1），你需要先创建分区。创建分区（如果需要） fdisk /dev/vdb然后在 fdisk 交互界面： 输入 n 创建新分区选择 p 创建主分区默认分区号和大小输…...

编程日记 2026/2/22 12:42:50

Kafka自定义分区机制

文章目录 1.如何自定义分区机制2.示例 1.如何自定义分区机制若需要使用自定义分区机制，需要完成两件事： 1)在 producer 程序中创建一个类，实现 org.apache.kafka.clients.producer.Partitioner 接口主要分区逻辑在 Partitioner.partition中…...

编程日记 2026/1/26 7:09:23

【HarmonyOS NEXT】关键资产存储开发案例

在 iOS 开发中 Keychain 是一个非常安全的存储系统，用于保存敏感信息，如密码、证书、密钥等。与文件系统不同，Keychain 提供了更高的安全性，因为它对数据进行了加密，并且只有经过授权的应用程序才能访问存储的数据。那…...

编程日记 2025/7/18 9:29:16

强化学习（赵世钰版）-学习笔记（9.策略梯度法）

本章是课程的导数第二章，旨在讲解策略的函数化形式。之前的方法，描述一个策略都是用表格的形式，每一行代表一个状态，每一列代表一个行为，表格中的元素对应相关状态下执行相关行为的概率。函数化的策略表征形式是指&a…...

编程日记 2026/2/24 13:29:47

ModuleNotFoundError: No module named ‘flask‘ 错误

要解决 ModuleNotFoundError: No module named ‘flask’ 错误，需确保已正确安装 Flask 库。以下是详细步骤： ‌1. 安装 Flask‌ 在终端或命令行中执行以下命令（注意权限问题）： 使用 pip 安装 pip install flask 若…...

编程日记 2026/2/16 23:08:17

【c++】【STL】unordered_set 底层实现（简略版）

【c】【STL】unordered_set 底层实现（简略版） ps:这个是我自己看的不保证正确，觉得太长的后面会总结整个调用逻辑 unordered_set 内部实现 template <class _Kty, class _Hasher hash<_Kty>, class _Keyeq equal_to<_Kty>…...

编程日记 2026/2/14 7:29:17

【Zephyr】【一】学习笔记

Zephyr RTOS 示例代码集 1. 基础示例 1.0 基础配置每个示例都需要一个 prj.conf 文件来配置项目。以下是各个示例所需的配置： 基础示例 prj.conf # 控制台输出 CONFIG_PRINTKy CONFIG_SERIALy CONFIG_UART_CONSOLEy# 日志系统 CONFIG_LOGy CONFIG_LOG_DEFAULT…...

编程日记 2026/2/14 16:48:06

网络安全设备配置与管理-实验4-防火墙AAA服务配置

实验4-p118防火墙AAA服务配置从这个实验开始，每一个实验都是长篇大论😓 不过有好兄弟会替我出手注意：1. gns3.exe必须以管理员身份打开，否则ping不通虚拟机。 win10虚拟机无法做本次实验，必须用学校给的虚拟机。首…...

编程日记 2026/2/17 12:54:03

后端框架模块化

后端框架的模块化设计旨在简化开发流程、提高可维护性，并通过分层解耦降低复杂性。以下是常见的后端模块及其在不同语言（Node.js、Java、Python）中的实现方式： 目录 1. 路由（Routing）2. 中间件（…...

编程日记 2025/7/17 9:44:56

【论文阅读】Contrastive Clustering Learning for Multi-Behavior Recommendation

论文地址：Contrastive Clustering Learning for Multi-Behavior Recommendation | ACM Transactions on Information Systems 摘要近年来，多行为推荐模型取得了显著成功。然而，许多模型未充分考虑不同行为之间的共性与差异性，以…...

编程日记 2026/2/18 5:22:33

视频转音频, 音频转文字

Ubuntu 24 环境准备 # 系统级依赖 sudo apt update && sudo apt install -y ffmpeg python3-venv git build-essential python3-dev# Python虚拟环境 python3 -m venv ~/ai_summary source ~/ai_summary/bin/activate核心工具链工具用途安装命令Whisper语音识别pip …...

编程日记 2025/7/18 16:52:21

基于协同过滤推荐算法的景点票务数据系统（python-计算机毕设）

摘要 I ABSTRACT II 第 1 章引言 1 研究背景及意义 1 研究背景 1研究意义 1 国内外研究现状 2 智慧旅游 3旅游大数据 3 研究内容 4本章小结 4 第 2 章相关技术概述 5 基于内容的推荐算法 5 基于内容的推荐算法原理 5基于内容的推荐算法实现 5 协同过滤推荐算法 6 协同过…...

编程日记 2026/2/24 15:36:43

目录

平面转换

平移

旋转

改变旋转原点

多重转换

缩放

倾斜

渐变

线性渐变

径向渐变

空间转换

平移

视距

旋转

立体呈现

缩放

动画

使现步骤

animation 复合属性

animation 属性拆分

逐帧动画

多组动画

相关文章：