前端小案例——520表白信封
前言：我们在学习完了HTML和CSS之后，就会想着使用这两个东西去做一些小案例，不过又没有什么好的案例让我们去练手，本篇文章就提供里一个案例——520表白信封
✨✨✨这里是秋刀鱼不做梦的BLOG
✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客
在开始讲解这个案例之前，先让我们了解一下本案例所需的前置知识：
- HTML 布局：创建合适的 HTML 结构，使用标签如
<input>、<label>、<div>、<img>和<h1>等。- CSS 布局与样式：设置卡片的外观、尺寸和基本样式，使用 Flexbox 居中布局。
- CSS 动画与变换：学习如何使用
transform创建旋转和位移效果，如何使用transition来平滑过渡。- HTML 与 CSS 交互：利用复选框和标签来控制动画效果，结合
:checked伪类来触发动画。- 背景和图片处理：使用
background-image和background-size来处理卡片上的图像，给卡片正面和背面添加背景。- 细节调整：学习如何通过阴影和字体样式提升视觉效果，让卡片看起来更生动。
——为了方便好奇的读者，我们在文章的最后，给出了实现这个案例的全部代码，读者可以直接复制后在自己的编译器上执行一下！！！（以下为所需的图片）
文件（读者如果想要进行练习可以先右键下载！！！）
那么现在正式开始我们的讲解：
目录
1.HTML骨架的搭建
2.CSS加工
（1）基础布局与背景样式
解释：
（2）隐藏复选框
解释：
（4）卡片正面样式
解释：
（5）卡片正面装饰
解释：
（6）卡片内部样式
解释：
（7）卡片交互样式
解释：
（8）卡片翻转动画
解释：
1.HTML骨架的搭建
在实现一个案例的最开始，我们要对其骨架（即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"> <!-- 导入 Google 字体 --><link href="https://fonts.googleapis.com/css?family=Lato:300|Sacramento" rel="stylesheet"> <!-- 导入 Lato 和 Sacramento 字体 --><link rel="stylesheet" href="./520.css"> <!-- 引入外部 CSS 文件 520.css --><title>秋刀鱼不做梦</title>
</head><body><div class="card"> <!-- 创建一个包含卡片的 div 元素 --><input id="open" type="checkbox"> <!-- 创建一个复选框用于控制卡片的展开与折叠 --><label class="open" for="open"></label> <!-- 设置标签，点击标签时会控制复选框状态 --><div class="card-front"> <!-- 卡片的正面 --><img src="./love.png" alt="" class="love"> <!-- 显示一张图片，图片路径为 love.png --><div class="note">Open it! 💗💗💗 </div> <!-- 在卡片正面显示一条提示信息 --></div><div class="card-inside"> <!-- 卡片的内部 --><div class="text-one"> <!-- 包含文本内容的 div --><h1>💌520💌</h1> <!-- 显示标题 "💌520💌" --><h2> <!-- 显示副标题 -->Your eyes are really beautiful, there are rain, sun and moon, mountains,rivers, clouds, flowers and birds,but my eyes are better, because I have you in my eyes.</h2></div></div></div>
</body></html>
根据上述的代码执行之后，我们就可以得到以下的结果：
嗯~~~看起来并不是很好看，没关系，我们现在就对其进行“化妆打扮”。
2.CSS加工
（1）基础布局与背景样式
/* 设置整个页面的样式 */
body {height: 100vh; /* 设置页面的高度为视口高度 */display: flex; /* 使用 Flexbox 布局 */justify-content: center; /* 水平居中对齐 */align-items: center; /* 垂直居中对齐 */background-color: #f2acac; /* 设置页面背景色为浅粉色 */
}
解释：
body：这部分代码定义了页面的整体布局。
height: 100vh;：设置页面的高度为视口高度（即屏幕的可视区域），确保页面能够自适应屏幕大小。display: flex;：使用 Flexbox 布局，方便实现元素的对齐。justify-content: center;和align-items: center;：这两个属性实现了内容的水平和垂直居中，将页面的元素（比如卡片）居中显示。background-color: #f2acac;：设置页面的背景颜色为浅粉色，作为页面的整体色调。
（2）隐藏复选框
input#open {display: none; /* 隐藏复选框元素，不显示在页面上 */
}
解释：
input#open：这是一个隐藏的复选框（type="checkbox"）。
display: none;：通过display: none;隐藏复选框，使其不显示在页面上，但依然可以通过 JavaScript 或 CSS 控制它的状态（例如选中或未选中）。
（3）卡片容器样式
.card {position: relative; /* 使卡片容器具有定位属性 */width: 300px; /* 设置卡片的宽度 */height: 300px; /* 设置卡片的高度 */transform-style: preserve-3d; /* 允许卡片元素使用 3D 转换 */transform: perspective(2500px); /* 设置视距，使得3D效果更加明显 */transition: .3s; /* 设置卡片翻转时的过渡效果 */
}
解释：
.card：这是卡片容器的样式，包含卡片正面和内侧内容。
position: relative;：让卡片容器可以相对于自己定位。width: 300px; height: 300px;：设置卡片容器的固定尺寸。transform-style: preserve-3d;：允许子元素在 3D 空间中进行变换，使得卡片内部的子元素（如正面和背面）可以按照 3D 效果进行旋转。transform: perspective(2500px);：为 3D 变换设置视距，使得卡片的旋转效果更加生动。transition: .3s;：设置卡片的过渡时间，使得卡片翻转时的动画效果更加平滑，持续时间为 0.3 秒。
（4）卡片正面样式
.card-front {position: relative; /* 设置相对定位 */background-color: #fff0f3; /* 设置正面背景色为浅粉色 */width: 300px; /* 宽度与卡片相同 */height: 300px; /* 高度与卡片相同 */transform-origin: left; /* 设置旋转的原点为卡片的左侧 */box-shadow: 30px 0 50px rgba(0, 0, 0, 0.3); /* 给正面添加阴影效果 */transition: .3s; /* 添加过渡效果，使翻转更平滑 */
}
解释：
.card-front：这是卡片的正面部分，包含卡片的正面背景和阴影效果。
position: relative;：使正面相对于卡片容器进行定位。background-color: #fff0f3;：设置正面的背景色为浅粉色。width: 300px; height: 300px;：设置正面宽度和高度与卡片容器一致。transform-origin: left;：设置旋转的原点在卡片的左侧，当进行 3D 旋转时，卡片会从左侧开始旋转。box-shadow: 30px 0 50px rgba(0, 0, 0, 0.3);：为正面添加阴影效果，使得卡片看起来更立体。transition: .3s;：为正面的翻转效果添加过渡，使得翻转动画更平滑。
（5）卡片正面装饰
.card-front:before {content: ""; /* 添加空内容 */position: absolute; /* 设置绝对定位 */width: 280px; /* 设置装饰元素的宽度 */height: 280px; /* 设置装饰元素的高度 */background-color: #f38e8e; /* 设置装饰的背景颜色 */top: 10px; /* 设置装饰相对正面的顶部位置 */left: 10px; /* 设置装饰相对正面的左侧位置 */
}
解释：
.card-front:before：使用伪元素:before在卡片正面上创建一个额外的装饰层。
content: "";：伪元素before必须有content属性，即使为空字符串。position: absolute;：使该装饰元素相对于卡片正面进行定位。width: 280px; height: 280px;：设置装饰元素的大小。background-color: #f38e8e;：设置装饰元素的背景颜色。top: 10px; left: 10px;：定位该装饰元素，使其位于卡片正面的 10px 内边距。
（6）卡片内部样式
.card-inside {position: absolute; /* 设置绝对定位 */background-color: #fff0f3; /* 背景色 */width: 300px; /* 宽度与卡片相同 */height: 300px; /* 高度与卡片相同 */z-index: -1; /* 让内侧元素处于背后 */left: 0; /* 设置左侧位置 */top: 0; /* 设置顶部位置 */background-color: #f5f5f5; /* 设置内侧背景色 */
}
解释：
.card-inside：这是卡片的内部部分，当卡片翻转时会显示内部内容。
position: absolute;：使得卡片内部内容绝对定位，确保其位于卡片容器内部。z-index: -1;：将卡片内部的内容放在卡片的背面，使其不会遮挡正面或其他内容。background-color: #f5f5f5;：设置卡片内侧的背景颜色。
（7）卡片交互样式
.open {position: absolute; /* 设置绝对定位 */width: 300px; /* 宽度与卡片相同 */height: 300px; /* 高度与卡片相同 */left: 0; /* 设置左侧位置 */top: 0; /* 设置顶部位置 */background-color: transparent; /* 使透明层透明 */z-index: 6; /* 设置透明层的 z-index，使其处于最上层 */cursor: pointer; /* 鼠标悬停时显示为可点击状态 */
}
解释：
.open：这是用于触发卡片翻转的透明层。通过点击这个区域，卡片会翻转展示背面。
position: absolute;：确保.open元素定位在卡片上层。background-color: transparent;：该区域是透明的，仅用于捕捉用户的点击事件。z-index: 6;：设置 z-index 确保.open元素位于卡片的最上层，能够响应点击事件。cursor: pointer;：设置鼠标悬停时显示为指针图标，表示该元素是可点击的。
（8）卡片翻转动画
#open:checked~.card-front {transform: rotateY(-145deg); /* 当复选框被选中时，卡片正面旋转 */
}#open:checked~.card-front:before {z-index: 5; /* 设置装饰层的层级 */background-color: #fff0f3; /* 修改背景颜色 */width: 330px; /* 设置装饰元素的宽度 */height: 300px; /* 设置装饰元素的高度 */top: 0; /* 设置装饰元素的顶部位置 */left: 0; /* 设置装饰元素的左侧位置 */background-image: url(./love.gif); /* 设置背景图片 */background-size: cover; /* 设置背景图片填充 */transform: rotateY(155deg) translateX(16px); /* 旋转并位移装饰元素 */
}
解释：
#open:checked~.card-front：当复选框被选中时，卡片正面会进行旋转。transform: rotateY(-145deg);：使卡片正面沿 Y 轴旋转 -145 度，表现为卡片翻转。
#open:checked~.card-front:before：当复选框被选中时，卡片正面装饰也会发生变化。background-image: url(./love.gif);：设置装饰元素的背景为动图，增强动态效果。transform: rotateY(155deg) translateX(16px);：旋转并位移装饰元素，创建卡片翻转的视觉效果。
——至此，我们就完成了对上述HTML骨架的"打扮"了，这里我们在整体的总结一下上述的流程：
-
页面布局：
- 使用
flex布局将页面的内容垂直和水平居中，设置背景颜色为浅粉色 (#f2acac)。
- 使用
-
卡片的结构和基本样式：
- 创建了一个
.card容器，其中包含卡片的正面 (.card-front) 和内部内容 (.card-inside)。 - 通过
transform和perspective使卡片具备 3D 旋转效果，同时设置过渡时间为0.3s，以便实现平滑的卡片翻转效果。
- 创建了一个
-
卡片翻转与动画：
- 通过隐藏的复选框 (
input#open) 控制卡片的翻转。当复选框选中时，使用rotateY(-145deg)使卡片的正面旋转，暴露出卡片的内部。 .card-front:before元素用于装饰正面，翻转时会显示一个背景图（如love.gif）和一些其他的视觉效果。
- 通过隐藏的复选框 (
-
提示文本与图片：
- 在卡片正面展示一个提示文本
.note，并添加阴影效果。 - 图片被居中放置，位于卡片的顶部。
- 在卡片正面展示一个提示文本
-
卡片内部内容：
- 卡片内部展示了一段文本，使用
Sacramento字体，并进行了样式设计，使文本居中且具有柔和的粉色调。
- 卡片内部展示了一段文本，使用
-
交互与控制：
- 通过复选框的选中状态 (
#open:checked) 来控制卡片的翻转效果。点击复选框后，卡片将翻转并展示背面的内容。
- 通过复选框的选中状态 (
现在在让我们执行一下程序，就可以得到以下结果了：
在文章的结尾，我们给出所有的代码：
<!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"><!-- 导入 Google 字体 --><link href="https://fonts.googleapis.com/css?family=Lato:300|Sacramento" rel="stylesheet"><!-- 导入 Lato 和 Sacramento 字体 --><style>/* 设置整个页面的样式 */body {height: 100vh;/* 设置页面的高度为视口高度 */display: flex;/* 使用 Flexbox 布局 */justify-content: center;/* 水平居中对齐 */align-items: center;/* 垂直居中对齐 */background-color: #f2acac;/* 设置页面背景色为浅粉色 */}/* 隐藏复选框 */input#open {display: none;/* 隐藏复选框元素，不显示在页面上 */}/* 设置卡片容器的基本样式 */.card {position: relative;/* 让卡片具有定位属性 */width: 300px;/* 设置卡片的宽度 */height: 300px;/* 设置卡片的高度 */transform-style: preserve-3d;/* 允许 3D 变换 */transform: perspective(2500px);/* 设置视距，使得3D效果更加明显 */transition: .3s;/* 设置卡片翻转时的过渡效果 */}/* 卡片的正面样式 */.card-front {position: relative;/* 设置相对定位 */background-color: #fff0f3;/* 设置正面背景色为浅粉色 */width: 300px;/* 宽度与卡片相同 */height: 300px;/* 高度与卡片相同 */transform-origin: left;/* 设置旋转的原点为卡片的左侧 */box-shadow: 30px 0 50px rgba(0, 0, 0, 0.3);/* 给正面添加阴影效果 */transition: .3s;/* 添加过渡效果，使翻转更平滑 */}/* 在卡片正面添加装饰 */.card-front:before {content: "";/* 添加空内容 */position: absolute;/* 设置绝对定位 */width: 280px;/* 设置装饰元素的宽度 */height: 280px;/* 设置装饰元素的高度 */background-color: #f38e8e;/* 设置装饰的背景颜色 */top: 10px;/* 设置装饰相对正面的顶部位置 */left: 10px;/* 设置装饰相对正面的左侧位置 */}/* 卡片的内侧样式 */.card-inside {position: absolute;/* 设置绝对定位 */background-color: #fff0f3;/* 背景色 */width: 300px;/* 宽度与卡片相同 */height: 300px;/* 高度与卡片相同 */z-index: -1;/* 让内侧元素处于背后 */left: 0;/* 设置左侧位置 */top: 0;/* 设置顶部位置 */background-color: #f5f5f5;/* 设置内侧背景色 */}/* 设置用于点击翻转卡片的透明层 */.open {position: absolute;/* 设置绝对定位 */width: 300px;/* 宽度与卡片相同 */height: 300px;/* 高度与卡片相同 */left: 0;/* 设置左侧位置 */top: 0;/* 设置顶部位置 */background-color: transparent;/* 使透明层透明 */z-index: 6;/* 设置透明层的 z-index，使其处于最上层 */cursor: pointer;/* 鼠标悬停时显示为可点击状态 */}/* 当复选框被选中时，卡片正面进行翻转 */#open:checked~.card-front {transform: rotateY(-145deg);/* 通过旋转卡片正面实现翻转效果 */}/* 当复选框被选中时，卡片正面装饰的样式变化 */#open:checked~.card-front:before {z-index: 5;/* 设置装饰层的 z-index 使其高于卡片正面 */background-color: #fff0f3;/* 背景色 */width: 330px;/* 调整宽度 */height: 300px;/* 高度不变 */top: 0;/* 调整顶部位置 */left: 0;/* 调整左侧位置 */background-image: url(./love.gif);/* 使用 GIF 动画作为背景 */background-size: cover;/* 使背景图像覆盖整个区域 */transform: rotateY(155deg) translateX(16px);/* 3D 旋转和位移效果 */}/* 卡片正面的提示文本样式 */.note {position: relative;/* 设置相对定位 */width: 200px;/* 设置宽度 */height: 150px;/* 设置高度 */background-color: #fff0f3;/* 设置背景色 */top: 85px;/* 设置顶部位置 */left: 50px;/* 设置左侧位置 */color: #333;/* 设置文本颜色 */font: 900 35px '';/* 设置字体样式 */display: flex;/* 使用 flex 布局 */align-items: center;/* 垂直居中对齐文本 */text-align: center;/* 水平居中对齐文本 */filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.3));/* 添加阴影效果 */}/* 图片的样式 */img {position: absolute;/* 设置绝对定位 */width: 90px;/* 设置图片宽度 */left: 50%;/* 图片水平居中 */transform: translateX(-50%);/* 精确水平居中 */z-index: 2;/* 设置图片的 z-index */top: 25px;/* 设置图片距离顶部的距离 */}/* 卡片内部文本样式 */.text-one {position: absolute;/* 设置绝对定位 */color: #333;/* 设置文本颜色 */font-size: 15px;/* 设置字体大小 */top: 30px;/* 设置顶部位置 */width: 300px;/* 设置宽度与卡片相同 */text-align: center;/* 设置文本居中 */color: #ff9999;/* 设置字体颜色 */font-family: 'Sacramento';/* 设置字体为 Sacramento */}/* 卡片内部文本的额外样式 */.text-one:after {content: "";/* 添加空内容 */top: 80px;/* 设置位置 */}</style><title>秋刀鱼不做梦</title>
</head><body><div class="card"> <!-- 创建一个包含卡片的 div 元素 --><input id="open" type="checkbox"> <!-- 创建一个复选框用于控制卡片的展开与折叠 --><label class="open" for="open"></label> <!-- 设置标签，点击标签时会控制复选框状态 --><div class="card-front"> <!-- 卡片的正面 --><img src="./love.png" alt="" class="love"> <!-- 显示一张图片，图片路径为 love.png --><div class="note">Open it! 💗💗💗 </div> <!-- 在卡片正面显示一条提示信息 --></div><div class="card-inside"> <!-- 卡片的内部 --><div class="text-one"> <!-- 包含文本内容的 div --><h1>💌520💌</h1> <!-- 显示标题 "💌520💌" --><h2> <!-- 显示副标题 -->Your eyes are really beautiful, there are rain, sun and moon, mountains,rivers, clouds, flowers and birds,but my eyes are better, because I have you in my eyes.</h2></div></div></div>
</body></html>以上就是本篇文章全部内容~~
相关文章：
前端小案例——520表白信封
前言：我们在学习完了HTML和CSS之后，就会想着使用这两个东西去做一些小案例，不过又没有什么好的案例让我们去练手，本篇文章就提供里一个案例——520表白信封 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主…...
【最后203篇系列】010 关于矩阵的一点思考
说明 今天拿起一本矩阵的书又翻了翻，毕竟AI搞到最后还得是数学。 我是感觉自己高数始终有点学的迷迷糊糊的，就打算这一年慢慢把矩阵部分扫一遍，毕竟这快肯定是实打实有用的。其他高级部分就等我发财之后再说了，哈哈。 内容 今…...
Python快捷手册
Python快捷手册 后续会陆续更新Python对应的依赖或者工具使用方法 文章目录 Python快捷手册[toc]1-依赖1-词云小工具2-图片添加文字3-BeautifulSoup网络爬虫4-Tkinter界面绘制5-PDF转Word 2-开发1-多线程和队列 3-运维1-Requirement依赖2-波尔实验室3-Anaconda3使用教程4-CentO…...
DeepSeek崛起：如何在云端快速部署你的专属AI助手
在2025年春节的科技盛宴上，DeepSeek因其在AI领域的卓越表现成为焦点，其开源的推理模型DeepSeek-R1擅长处理多种复杂任务，支持多语言处理，并通过搜索引擎获取实时信息。DeepSeek因其先进的自然语言处理技术、广泛的知识库和高性价比…...
【金融量化】Ptrade中的基础交易与高级量化交易策略的下单接口
1 基础交易与订单管理接口 1. order 功能：用于按指定数量买卖股票或其他金融产品。 参数： security：股票代码（字符串类型）。amount：交易数量（整数类型），正数表示买入&…...
GCC RISCV 后端 -- GCC 后端框架的一些理解
GCC 已经提供了一整套的编译框架，从前端（Frontend / GENERIC-Tree）对编程语言的语法语义处理，到中端（Middle-End / GIMPLE-Tree）的目标机器无关（Target Indepndent）的优化处理&#…...
【前端】HTML 备忘清单（超级详细！）
文章目录 入门hello.html注释 Comment段落 ParagraphHTML 链接Image 标签文本格式标签标题Section Divisions内部框架HTML 中的 JavaScriptHTML 中的 CSS HTML5 标签页面标题导航HTML5 TagsHTML5 VideoHTML5 AudioHTML5 RubyHTML5 kdiHTML5 progressHTML5 mark HTML 表格Table …...
鸿蒙开发新视角：用ArkTS解锁责任链模式
责任链模式：概念与原理 责任链模式（Chain of Responsibility Pattern）是一种行为型设计模式，它将多个处理者对象连接成一条链，并将请求沿着链传递，直到有一个处理者能够处理该请求。这种模式的核心思想是将…...
Linux的用户与权限--第二天
认知root用户（超级管理员） root用户用于最大的系统操作权限 普通用户的权限，一般在HOME目录内部不受限制 su与exit命令 su命令： su [-] 用户名 -符号是可选的，表示切换用户后加载环境变量 参数为用户名，…...
【Unity】搭建HTTP服务器并解决IP无法访问问题解决
一、核心目标与背景 在Unity中搭建本地HTTP服务器，可以用于实现Web与游戏交互、本地数据接口测试、跨设备通信等场景。但在实际部署中，开发者常遇到以下问题： 本机IP无法访问：服务绑定localhost时，局域网设备无法连…...
【C语言】结构体自动对齐问题 解析与解决方案
【C语言】结构体自动对齐问题 解析与解决方案 文章目录 【C语言】结构体自动对齐问题 解析与解决方案一、引言：问题背景二、结构体对齐机制详解2.1 对齐规则2.2 示例分析 三、实际案例与错误复现3.1 问题代码修正 四、 解决方案对比与实现4.1 禁用自动对齐ÿ…...
安卓开发相机功能
相机功能 安卓中的相机调用功能也经历了很多的方案升级，目前可选的官方方案是CameraX、Camera2、Camera（废弃），还有一些第三方免费或者是付费的相机库。对于大多数开发者，建议使用 CameraX。 CameraX CameraX 是 An…...
Zookeeper 及 基于ZooKeeper实现的分布式锁
1 ZooKeeper 1.1 ZooKeeper 介绍 ZooKeeper是一个开源的分布式协调服务，它的设计目标是将那些复杂且容易出错的分布式一致性服务封装起来，构成一个高效可靠的原语集，并以一系列简单易用的接口提供给用户使用。 原语：操作系统或…...
Ubuntu20.04双系统安装及软件安装（五）：VSCode
Ubuntu20.04双系统安装及软件安装（五）：VSCode 打开VScode官网，点击中间左侧的deb文件下载： 系统会弹出下载框，确定即可。 在文件夹的**“下载”目录**，可看到下载的安装包，在该目录下…...
【计算机网络入门】初学计算机网络（十一）重要
目录 1. CIDR无分类编址 1.1 CIDR的子网划分 1.1.1 定长子网划分 1.1.2 变长子网划分 2. 路由聚合 2.1 最长前缀匹配原则 3. 网络地址转换NAT 3.1 端口号 3.2 IP地址不够用？ 3.3 公网IP和内网IP 3.4 NAT作用 4. ARP协议 4.1 如何利用IP地址找到MAC地址…...
Android Flow操作符分类
Flow操作符分类...
经验分享：用一张表解决并发冲突！数据库事务锁的核心实现逻辑
背景 对于一些内部使用的管理系统来说，可能没有引入Redis，又想基于现有的基础设施处理并发问题，而数据库是每个应用都避不开的基础设施之一，因此分享个我曾经维护过的一个系统中，使用数据库表来实现事务锁的方式。 之…...
C#项目文件.csproj 文件结构解析
以下是对提供的 .csproj 文件内容的详细解析： 1. 项目根元素 <Project ToolsVersion"12.0" DefaultTargets"Build" xmlns"http://schemas.microsoft.com/developer/msbuild/2003"> ToolsVersion"12.0": 指定使…...
C++-第二十章：智能指针
目录 第一节：std::auto_ptr 第二节：std::unique_ptr 第三节：std::shared_ptr 第四节：std::shared_ptr的缺陷 4-1.循环引用 4-2.删除器 下期预告： 智能指针的作用是防止指针出作用域时忘记释放内存而造成内存泄漏&…...
chrome Vue.js devtools 提示不支持该扩展组件，移除
可能是版本不兼容，可以重新安装，推荐网址极简插件官网_Chrome插件下载_Chrome浏览器应用商店 直接搜索vue，下载旧版，vue2、vue3都支持，上面那个最新版本试了下，vue2的肯定是不能用...
C# 中的Action和Func是什么？Unity 中的UnityAction是什么？ 他们有什么区别？
所属范围：Action 和 Func 是 C# 语言标准库中的委托类型，可在任何 C# 项目里使用；UnityAction 是 Unity 引擎专门定义的委托类型，只能在 Unity 项目中使用。 返回值：Action 和 UnityAction 封装的方法没有返回值&…...
【流行病学】Melodi-Presto因果关联工具
title: “[流行病学] Melodi Presto因果关联工具” date: 2022-12-08 lastmod: 2022-12-08 draft: false tags: [“流行病学”,“因果关联工具”] toc: true autoCollapseToc: true 阅读介绍 Melodi-Presto: A fast and agile tool to explore semantic triples derived from …...
Stream在Swift 和 Flutter上的对比
Swift 和 Flutter 都是跨平台开发框架，它们各自提供了强大的工具来处理数据流，尤其是在移动应用开发中。虽然 Swift 主要用于 iOS 开发，而 Flutter 主要用于移动应用的开发（包括 iOS 和 Android），但它们各自…...
Vue3 TransitionGroup组件深入解析：结合Element Plus实践指南
引言 在动态列表交互场景中，元素的增删排序需要优雅的过渡效果。Vue3的TransitionGroup组件为这类需求提供了专业解决方案。本文将通过Element Plus等流行UI库的实战案例，深入剖析TransitionGroup的应用技巧。 一、TransitionGroup核心特性 1.1 与Tran…...
关于opencv中solvepnp中UPNP与DLS与EPNP的参数
The methods SOLVEPNP_DLS and SOLVEPNP_UPNP cannot be used as the current implementations are unstable and sometimes give completely wrong results. If you pass one of these two flags, SOLVEPNP_EPNP method will be used instead.、 由于当前的实现不稳定&#x…...
Versal - XRT（CPP） 2024.1
目录 1.简介 2. XRT 2.1 XRT vs OpenCL 2.2 Takeways 2.3 XRT C APIs 2.4 Device and XCLBIN 2.5 Buffers 2.5.1 Buffer 创建 2.5.1.1 普通 Buffer 2.5.1.2 特殊 Buffer 2.5.1.3 用户指针 Buffer 2.5.2 Data Transfer 2.5.2.1 read/write API 2.5.2.2 map API 2…...
【零基础到精通Java合集】第十八集：多线程与并发编程-线程池与Callable/Future应用
课程标题：线程池与Callable/Future应用（15分钟） 目标：掌握线程池的创建与管理，理解Callable任务与Future异步结果处理机制 0-1分钟：课程引入与线程池意义 以“银行窗口服务”类比线程池：复用固定资源（柜员）处理多任务（客户）。说明线程池的核心价值——避免频繁创建…...
windows下安装Open Web UI
windows下安装openwebui有三种方式,docker,pythonnode.js,整合包. 这里我选择的是第二种,非docker. 非Docker方式安装 1. 安装Python： 下载并安装Python 3.11，建议安装路径中不要包含中文字符，并勾选“Add python 3.11 to Path”选项。 安…...
【自用】NLP算法面经（4）
一、deepseek 1、MLA （1）LLM推理过程 prefill阶段：模型对全部的prompt tokens一次性并行计算，最终生成第一个输出token。decode阶段：每次生成一个token，直到生成EOS（end-of-sequence…...
LeetCode热题100JS（20/100）第四天|41. 缺失的第一个正数|73. 矩阵置零|54. 螺旋矩阵|48. 旋转图像
41. 缺失的第一个正数 题目链接：41. 缺失的第一个正数 难度：困难 刷题状态：1刷 新知识： 解题过程 思考 示例 1： 输入：nums [1,2,0] 输出：3 解释：范围 [1,2] 中的数字都在数组中…...