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

HTMLCSS：惊！3D 折叠按钮

news 来源：原创 2025/5/20 23:34:38

这段代码创建了一个具有 3D 效果和动画的按钮，按钮上有 SVG 图标和文本。按钮在鼠标悬停时会显示一个漂浮点动画，图标会消失并显示一个线条动画。这种效果适用于吸引用户注意并提供视觉反馈。按钮的折叠效果和背景渐变增加了页面的美观性。

演示效果

HTML&CSS

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>公众号关注：前端Hardy</title><style>body {margin: 0;padding: 0;background: #212121;display: flex;align-items: center;justify-content: center;height: 100vh;}.button {--h-button: 48px;--w-button: 102px;--round: 0.75rem;cursor: pointer;position: relative;display: inline-flex;align-items: center;justify-content: center;overflow: hidden;transition: all 0.25s ease;background: radial-gradient(65.28% 65.28% at 50% 100%,rgba(223, 113, 255, 0.8) 0%,rgba(223, 113, 255, 0) 100%),linear-gradient(0deg, #7a5af8, #7a5af8);border-radius: var(--round);border: none;outline: none;padding: 12px 18px;}.button::before,.button::after {content: "";position: absolute;inset: var(--space);transition: all 0.5s ease-in-out;border-radius: calc(var(--round) - var(--space));z-index: 0;}.button::before {--space: 1px;background: linear-gradient(177.95deg,rgba(255, 255, 255, 0.19) 0%,rgba(255, 255, 255, 0) 100%);}.button::after {--space: 2px;background: radial-gradient(65.28% 65.28% at 50% 100%,rgba(223, 113, 255, 0.8) 0%,rgba(223, 113, 255, 0) 100%),linear-gradient(0deg, #7a5af8, #7a5af8);}.button:active {transform: scale(0.95);}.fold {z-index: 1;position: absolute;top: 0;right: 0;height: 1rem;width: 1rem;display: inline-block;transition: all 0.5s ease-in-out;background: radial-gradient(100% 75% at 55%,rgba(223, 113, 255, 0.8) 0%,rgba(223, 113, 255, 0) 100%);box-shadow: 0 0 3px black;border-bottom-left-radius: 0.5rem;border-top-right-radius: var(--round);}.fold::after {content: "";position: absolute;top: 0;right: 0;width: 150%;height: 150%;transform: rotate(45deg) translateX(0%) translateY(-18px);background-color: #e8e8e8;pointer-events: none;}.button:hover .fold {margin-top: -1rem;margin-right: -1rem;}.points_wrapper {overflow: hidden;width: 100%;height: 100%;pointer-events: none;position: absolute;z-index: 1;}.points_wrapper .point {bottom: -10px;position: absolute;animation: floating-points infinite ease-in-out;pointer-events: none;width: 2px;height: 2px;background-color: #fff;border-radius: 9999px;}@keyframes floating-points {0% {transform: translateY(0);}85% {opacity: 0;}100% {transform: translateY(-55px);opacity: 0;}}.points_wrapper .point:nth-child(1) {left: 10%;opacity: 1;animation-duration: 2.35s;animation-delay: 0.2s;}.points_wrapper .point:nth-child(2) {left: 30%;opacity: 0.7;animation-duration: 2.5s;animation-delay: 0.5s;}.points_wrapper .point:nth-child(3) {left: 25%;opacity: 0.8;animation-duration: 2.2s;animation-delay: 0.1s;}.points_wrapper .point:nth-child(4) {left: 44%;opacity: 0.6;animation-duration: 2.05s;}.points_wrapper .point:nth-child(5) {left: 50%;opacity: 1;animation-duration: 1.9s;}.points_wrapper .point:nth-child(6) {left: 75%;opacity: 0.5;animation-duration: 1.5s;animation-delay: 1.5s;}.points_wrapper .point:nth-child(7) {left: 88%;opacity: 0.9;animation-duration: 2.2s;animation-delay: 0.2s;}.points_wrapper .point:nth-child(8) {left: 58%;opacity: 0.8;animation-duration: 2.25s;animation-delay: 0.2s;}.points_wrapper .point:nth-child(9) {left: 98%;opacity: 0.6;animation-duration: 2.6s;animation-delay: 0.1s;}.points_wrapper .point:nth-child(10) {left: 65%;opacity: 1;animation-duration: 2.5s;animation-delay: 0.2s;}.inner {z-index: 2;gap: 6px;position: relative;width: 100%;color: white;display: inline-flex;align-items: center;justify-content: center;font-size: 16px;font-weight: 500;line-height: 1.5;transition: color 0.2s ease-in-out;}.inner svg.icon {width: 18px;height: 18px;transition: fill 0.1s linear;}.button:focus svg.icon {fill: white;}.button:hover svg.icon {fill: transparent;animation:dasharray 1s linear forwards,filled 0.1s linear forwards 0.95s;}@keyframes dasharray {from {stroke-dasharray: 0 0 0 0;}to {stroke-dasharray: 68 68 0 0;}}@keyframes filled {to {fill: white;}}</style>
</head><body><button type="button" class="button"><span class="fold"></span><div class="points_wrapper"><i class="point"></i><i class="point"></i><i class="point"></i><i class="point"></i><i class="point"></i><i class="point"></i><i class="point"></i><i class="point"></i><i class="point"></i><i class="point"></i></div><span class="inner"><svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"><polyline points="13.18 1.37 13.18 9.64 21.45 9.64 10.82 22.63 10.82 14.36 2.55 14.36 13.18 1.37"></polyline></svg>点击开奖</span></button></body></html>

HTML 结构

  • button：定义了一个按钮元素，用于触发点击事件，并应用了类名button来应用CSS样式。
  • fold：一个用于创建按钮折叠效果的span元素。
  • points_wrapper：包含多个point元素的容器，用于创建漂浮点效果。
  • point：多个point元素，用于创建漂浮点效果。
  • inner：包含按钮文本和图标的span元素。
  • icon：一个SVG图标，用于显示按钮内的图标。

CSS 样式

  • body：设置页面的外边距、内边距、背景色、显示方式、对齐方式和高度。
  • .button：定义了按钮的基本样式，包括光标样式、位置、显示方式、对齐方式、溢出、过渡效果、背景渐变和圆角。
  • .button::before, .button::after：使用伪元素为按钮添加额外的视觉效果。
  • .button:active：定义了按钮被按下时的样式，包括缩放效果。
  • .fold：定义了按钮折叠效果的样式，包括位置、尺寸、过渡效果和背景渐变。
  • .fold::after：使用伪元素为折叠效果添加额外的视觉效果。
  • .points_wrapper：定义了漂浮点容器的样式，包括溢出、尺寸、位置和指针事件。
  • .points_wrapper .point：定义了漂浮点的样式，包括位置、动画和背景色。
  • @keyframes floating-points：定义了一个关键帧动画，用于控制漂浮点的浮动效果。
  • .inner：定义了按钮内部文本和图标的样式，包括位置、尺寸、颜色、字体和过渡效果。
  • .inner svg.icon：定义了SVG图标的样式，包括尺寸和过渡效果。
  • .button:focus svg.icon和.button:hover svg.icon：定义了SVG图标在获得焦点和鼠标悬停时的样式，包括填充色和动画。

相关文章：

HTMLCSS：惊！3D 折叠按钮

这段代码创建了一个具有 3D 效果和动画的按钮&#xff0c;按钮上有 SVG 图标和文本。按钮在鼠标悬停时会显示一个漂浮点动画&#xff0c;图标会消失并显示一个线条动画。这种效果适用于吸引用户注意并提供视觉反馈。按钮的折叠效果和背景渐变增加了页面的美观性。 演示效果 HT…...

编程日记 2025/5/20 23:34:38

如何更好的进行时间管理

先想一下我们想要做的事情&#xff0c;然后拿出Excel表格将这些事情记录下来&#xff0c;我们把它叫做任务对这些任务按照重要性&#xff0c;紧急程度进行排序&#xff0c;拿出表格中的前六个任务&#xff0c;就是今天要做的任务新建另一张excel表格&#xff0c;表格的一列为时…...

编程日记 2025/5/15 22:34:26

我在华为的安全日常

在华为工作了数年后&#xff0c;我养成了一个习惯&#xff1a;每次离开座位&#xff0c;即便是去卫生间&#xff0c;我也会条件反射地锁屏电脑。晚上回到家&#xff0c;躺在床上&#xff0c;脑海中偶尔会闪过一丝疑虑&#xff1a;办公室的门窗是否关好&#xff1f;虽然这种担忧…...

编程日记 2025/5/20 23:17:42

for媒体打破智能座舱体验同质化，斑马智行荣获“华舆奖”优秀创

打破智能座舱体验同质化&#xff0c;斑马智行荣获“华舆奖”优秀创新生态伙伴 12月12日&#xff0c;消费者洞察与市场研究机构J.D. Power|君迪与同济大学 HVR Lab&#xff08;人车关系实验室&#xff09;共同发布了 2024 中国智能座舱的研究洞察&#xff0c;并公布了华舆奖中国…...

编程日记 2025/5/20 23:25:53

自己搭建专属AI：Llama大模型私有化部署

前言 AI新时代&#xff0c;提高了生产力且能帮助用户快速解答问题&#xff0c;现在用的比较多的是Openai、Claude&#xff0c;为了保证个人隐私数据&#xff0c;所以尝试本地&#xff08;Mac M3&#xff09;搭建Llama模型进行沟通。 Gpt4all 安装比较简单&#xff0c;根据 G…...

编程日记 2025/5/20 23:22:45

芯片Tapeout power signoff 之IR Drop Redhawk Ploc文件格式及其意义

数字IC后端工程师在芯片流程最后阶段都会使用redhawk或voltus进行设计的IR Drop功耗signoff分析。必须确保静态&#xff0c;动态ir drop都符合signoff标准。 在做redhawk ir drop分析前&#xff0c;我们需要提供一个redhawk ploc供电点坐标。 数字IC设计后端实现前期预防IR D…...

编程日记 2025/5/20 23:16:20

[机器学习]sklearn入门指南（1）

简介 scikit-learn&#xff08;简称sklearn&#xff09;是一个开源的Python机器学习库&#xff0c;它提供了简单而高效的工具用于数据挖掘和数据分析&#xff0c;并且拥有一个活跃的开发社区。它建立在NumPy、SciPy和matplotlib这些科学计算库之上&#xff0c;旨在提供一致且可…...

编程日记 2025/5/20 2:04:34

GitCode 光引计划投稿 | GoIoT：开源分布式物联网开发平台

GoIoT 是基于Gin 的开源分布式物联网&#xff08;IoT&#xff09;开发平台&#xff0c;用于快速开发&#xff0c;部署物联设备接入项目&#xff0c;是一套涵盖数据生产、数据使用和数据展示的解决方案。 GoIoT 开发平台&#xff0c;它是一个企业级物联网平台解决方案&#xff…...

编程日记 2025/5/20 23:01:09

【R语言遥感技术】“R+遥感”的水环境综合评价方法

R语言在遥感领域中是一个强大的工具&#xff0c;它提供了一系列的功能和优势&#xff0c;使得遥感数据的分析和应用更加高效和灵活。以下是R语言在遥感中的具体应用&#xff1a; 数据处理&#xff1a;R语言可以处理和清洗遥感数据&#xff0c;包括数据转换、滤波处理、去噪和数…...

编程日记 2025/5/17 20:46:21

QT--信号与槽机制

什么是信号与槽&#xff1f; 在 Qt 中&#xff0c;信号与槽是一种用于对象间通信的机制。它使得一个对象可以通知其他对象某个事件的发生&#xff0c;而不需要直接知道这些对象的具体实现。这种机制非常适合事件驱动的编程模型&#xff0c;如用户界面交互。 1. 信号&#xff…...

编程日记 2025/5/15 10:59:22

Windbg常用命令

禁止垃圾信息 ed nt!Kd_STORMINIPORT_Mask 0 ed nt!Kd_SXS_Mask 0 ed nt!Kd_FUSION_Mask 0 命令大全: 命令 - Windows drivers | Microsoft Learn .reload /f 重新加载符号表 常用命令 继续执行: g单步过/步入: p, t退出: q查看调用堆栈: k, kb列出模块: lm, lml设置断…...

编程日记 2025/5/19 9:21:05

YOLO11改进-模块-引入多分支卷积InceptionDepthwiseConvolution(IDC) 解决多尺度、小目标

YOLOv11 的设计目标是通过高效的网络结构&#xff0c;在保证准确率的前提下&#xff0c;最大化推理速度。传统卷积操作虽然能够捕获局部信息&#xff0c;但在处理大规模场景或复杂背景时&#xff0c;较小的感受野可能导致细节信息不足&#xff0c;影响模型的检测能力。为了解决…...

编程日记 2025/5/16 6:57:49

国标GB28181-2022平台EasyGBS：安防监控中P2P的穿透方法

在安防监控领域&#xff0c;P2P技术因其去中心化的特性而受到关注&#xff0c;尤其是在远程视频监控和数据传输方面。P2P技术允许设备之间直接通信&#xff0c;无需通过中央服务器&#xff0c;这在提高效率和降低成本方面具有明显优势。然而&#xff0c;P2P技术在实际应用中也面…...

编程日记 2025/5/20 2:52:30

C++软件设计模式之外观（Facade）模式

C软件设计模式中的外观&#xff08;Facade&#xff09;模式 1. 外观模式的定义 外观模式&#xff08;Facade Pattern&#xff09;是一种结构型设计模式&#xff0c;它为一个复杂的子系统提供一个简化的接口。外观模式通过一个统一的接口来访问子系统的多个组成部分&#xff0…...

编程日记 2025/5/19 16:34:33

Spring Boot 项目创建

创建一个新项目&#xff1a; 打开 Spring Initializr 网址&#xff1a;https://start.spring.io/ &#xff0c;然后创建一个新项目&#xff1a; springboot3.3.5_jdk17&#xff1a; Project&#xff08;Maven&#xff09;编程语言&#xff08;Java 17&#xff09;Spring Boo…...

编程日记 2025/5/15 12:24:48

SharpDX 从入门到精通：全面学习指南

摘要&#xff1a; 本文旨在为想要深入学习 SharpDX 的开发者提供一份全面的指南。从 SharpDX 的基础概念入手&#xff0c;逐步深入探讨其在不同场景下的应用&#xff0c;包括图形渲染、音频处理等&#xff0c;并结合大量详细的代码案例帮助读者更好地理解和掌握 SharpDX 的使用…...

编程日记 2025/5/20 6:56:21

【Web】2024“国城杯”网络安全挑战大赛决赛题解(全)

最近在忙联通的安全准入测试&#xff0c;很少有时间看CTF了&#xff0c;今晚抽点时间回顾下上周线下的题(期末还没开始复习&#x1f622;) 感觉做渗透测试一半的时间在和甲方掰扯&水垃圾洞&#xff0c;没啥惊喜感&#xff0c;还是CTF有意思 目录 Mountain ez_zhuawa 图…...

编程日记 2025/5/20 6:49:51

操作系统（24）提高磁盘I/O速度的途径

前言 操作系统提高磁盘I/O速度的途径多种多样&#xff0c;这些途径旨在减少磁盘访问的延迟和开销&#xff0c;提高数据传输的效率。 一、磁盘高速缓存&#xff08;Disk Cache&#xff09; 磁盘高速缓存是一种在内存中为磁盘数据设置的缓冲区&#xff0c;用于存储磁盘中某些盘块…...

编程日记 2025/5/14 9:48:29

en3d 部署笔记

目录 依赖项： Nvdiffrast 编译代码和frpc_linux_amd64 下载地址： tiny-cuda-nn 安装 ICON算法库依赖 icon依赖 kaolin infer_normal_fixpose 解决 报错了，推荐的安装方法： kaolin测试： ICON依赖项 requirements.txt 改进 voxelize_cuda 安装ok 运行后： 修改代…...

编程日记 2025/5/17 21:29:17

c++类型判断和获取原始类型

std::traits学习 类型判断和退化&#xff08;获取原始类型&#xff09;的原理就是利用模板的特例化。根据调用模板的特例化&#xff0c;在特例化模板中实现判断的逻辑或者退化的逻辑。 一、类型判断 判断整型数据的模板类 #include <iostream> namespace zk {templa…...

编程日记 2025/5/14 17:35:56

医疗行业 UI 设计系列合集（一）：精准定位

在当今数字化时代&#xff0c;医疗行业与信息技术的融合日益紧密&#xff0c;UI 设计在其中扮演着至关重要的角色。精准定位的 UI 设计能够显著提升医疗产品与服务的用户体验&#xff0c;进而对医疗效果和患者满意度产生积极影响。 一、医疗行业 UI 设计的重要性概述 医疗行业…...

编程日记 2025/5/20 10:53:59

EasyExcel停更，FastExcel接力

11月6日消息&#xff0c;阿里巴巴旗下的Java Excel工具库EasyExcel近日宣布&#xff0c;将停止更新&#xff0c;未来将逐步进入维护模式&#xff0c;将继续修复Bug&#xff0c;但不再主动新增功能。 EasyExcel以其快速、简洁和解决大文件内存溢出的能力而著称&#xff0c;官方…...

编程日记 2025/5/19 14:12:04

java agent的使用【通俗易懂版】

一、静态代理Agent 1&#xff0e;生成Agent的jar包 &#xff08;1&#xff09;创建Agent项目&#xff0c;引入javassist.jar包 &#xff08;2&#xff09;编写premain方法 import java.lang.instrument.Instrumentation;public class Agent1 {public static void premain(Stri…...

编程日记 2025/5/19 13:49:14

010 Qt_输入类控件(LineEdit、TextEdit、ComboBox、SpinBox、DateTimeEdit、Dial、Slider)

文章目录 前言一、QLineEdit1.简介2.常见属性及说明3.重要信号及说明4.示例一&#xff1a;用户登录界面5.示例二&#xff1a;验证两次输入的密码是否一致显示密码 二、TextEdit1.简介2.常见属性及说明3.重要信号及说明4.示例一&#xff1a;获取多行输入框的内容5.示例二&#x…...

编程日记 2025/5/16 3:20:54

C++设计模式：享元模式 （附文字处理系统中的字符对象案例）

什么是享元模式&#xff1f; 享元模式是一个非常实用的结构型设计模式&#xff0c;它的主要目的是节省内存&#xff0c;尤其在需要创建大量相似对象时。 通俗解释&#xff1a; 想象我们在写一本书&#xff0c;每个字母都需要表示出来。如果每个字母都单独用对象表示&#xff…...

编程日记 2025/5/18 5:05:38

机器学习之 KNN 算法

一、引言 在机器学习领域中&#xff0c;K 近邻&#xff08;K-Nearest Neighbors&#xff0c;KNN&#xff09;算法是一种简单而有效的分类和回归算法。它的基本思想是根据数据点之间的距离来确定它们的相似性&#xff0c;并根据其最近的邻居的类别或数值来预测新数据点的类别或…...

编程日记 2025/5/20 23:02:16

矩阵：Input-Output Interpretation of Matrices （中英双语）

矩阵的输入-输出解释&#xff1a;深入理解与应用 在线性代数中&#xff0c;矩阵与向量的乘积 ( y A x y Ax yAx ) 是一个极为重要的关系。通过这一公式&#xff0c;我们可以将矩阵 ( A A A ) 看作一个将输入向量 ( x x x ) 映射到输出向量 ( y y y ) 的线性变换。在这种…...

编程日记 2025/5/20 16:27:47

ctfhub技能树——disable_functions

LD_PRELOAD 来到首页发现有一句话直接就可以用蚁剑连接 根目录里有/flag但是不能看;命令也被ban了就需要绕过了 绕过工具在插件市场就可以下载 如果进不去的话 项目地址: #本地仓库;插件存放 antSword\antData\plugins 绕过选择 上传后我们点进去可以看到多了一个绕过的文件;…...

编程日记 2025/5/18 17:31:35

Web3.0安全开发实践：探索比特币DeFi生态中的PSBT

近年来&#xff0c;部分签名比特币交易&#xff08;PSBT&#xff09;在比特币生态系统中获得了显著关注。随着如Ordinal和基于铭文的资产等创新的兴起&#xff0c;安全的多方签名和复杂交易的需求不断增加&#xff0c;这使得PSBT成为应对比特币生态不断发展中不可或缺的工具。 …...

编程日记 2025/5/16 11:42:00

【Yonghong 企业日常问题 06】上传的文件不在白名单，修改allow.jar.digest属性添加允许上传的文件SH256值？

文章目录 前言问题描述问题分析问题解决1.允许所有用户上传驱动文件2.如果是想只上传白名单的驱动 前言 该方法适合永洪BI系列产品&#xff0c;包括不限于vividime desktop&#xff0c;vividime z-suit&#xff0c;vividime x-suit产品。 问题描述 当我们连接数据源的时候&a…...

编程日记 2025/5/19 20:10:41

Lecture 6 Isolation System Call Entry

文章目录 一 重要的函数清单1 write(user/usys.s) 一 usertrap函数(C code) Lecture6 Isolation & System Call Entry视频链接 对应XV6 Book Chapter 4 Traps and device drivers 一 重要的函数清单 1 write(user/usys.s) .global write write:li a7, SYS_writeecallret…...

编程日记 2025/5/19 18:08:06

重温设计模式----装饰模式

文章目录 装饰模式定义UML 图其主要优点包括&#xff1a;装饰模式的主要角色有&#xff1a;C 代码示例总结 装饰模式定义 动态的给一个对象添加一些额外的职责&#xff0c;就增加功能来说&#xff0c;装饰模式必生成子类更加灵活 装饰模式&#xff08;Decorator Pattern&…...

编程日记 2025/5/10 22:16:52

图像处理-Ch2-空间域的图像增强

Ch2 空间域的图像增强 文章目录 Ch2 空间域的图像增强Background灰度变换函数(Gray-level Transformation)对数变换(Logarithmic)幂律变换(Power-Law)分段线性变换函数(Piecewise-Linear)对比度拉伸(Contrast-Stretching)灰度级分层(Gray-level Slicing) 直方图处理(Histogram …...

编程日记 2025/5/18 9:32:19

uniapp Native.js原生arr插件服务发送广播到uniapp页面中

前言 最近搞了个设备&#xff0c;需求是读取m1卡&#xff0c;厂家给了个安卓原生demo&#xff0c;接入arr插件如下&#xff0c;接入后发现还是少了一部分代码&#xff0c;设备服务调起后触发刷卡无法发送到uniapp里。 中间是一些踩坑记录&#xff0c;最后面是解决办法&#xf…...

编程日记 2025/5/19 11:32:08

重温设计模式--1、组合模式

文章目录 1 、组合模式&#xff08;Composite Pattern&#xff09;概述2. 组合模式的结构3. C 代码示例4. C示例代码25 .应用场景 1 、组合模式&#xff08;Composite Pattern&#xff09;概述 定义&#xff1a;组合模式是一种结构型设计模式&#xff0c;它允许你将对象组合成…...

编程日记 2025/5/18 21:20:15

关于鸿蒙架构feature

鸿蒙feature层模块架构 model&#xff1a;定义数据类型&#xff0c;进行接口请求 view&#xff1a;视图层 写UI viewModel&#xff1a;控制层 关于逻辑和请求调用 page页...

编程日记 2025/5/20 7:54:28

CentOS下，离线安装vscode的步骤；

前置条件&#xff1a; 1.CentOS7; 步骤&#xff1a; 1.下载vscode指定版本&#xff0c;例如&#xff1b; 例如 code-1.83.1-1696982959.el7.x86_64.rpm 2.使用下面命令&#xff1a; sudo rpm -ivh code-1.83.1-1696982959.el7.x86_64.rpm 其他&#xff1a; 卸载vscode的命…...

编程日记 2025/5/20 21:58:44

.NET周刊【12月第3期 2024-12-15】

国内文章 重磅推出 Sdcb Chats&#xff1a;一个全新的开源大语言模型前端 https://www.cnblogs.com/sdcb/p/18597030/sdcb-chats-intro Sdcb Chats是一个新推出的开源大语言模型前端&#xff0c;旨在提升用户交互体验&#xff0c;并填补市场上基于.NET的前端空白。它引入树状…...

编程日记 2025/5/6 12:29:07

操作系统（23）外存的存储空间的管理

一、外存的基本概念与特点 定义&#xff1a;外存&#xff0c;也称为辅助存储器&#xff0c;是计算机系统中用于长期存储数据的设备&#xff0c;如硬盘、光盘、U盘等。与内存相比&#xff0c;外存的存储容量大、成本低&#xff0c;但访问速度相对较慢。特点&#xff1a;外存能够…...

编程日记 2025/5/18 9:34:19

vue3中多层级路由缓存失效问题

问题现象&#xff1a; 在项目中路由嵌套了超过两层后&#xff0c;使用keep-alive对路由进行页面的缓存&#xff0c;发现并不能生效。 使用的路由结构&#xff1a; // 一级路由path: menu1,component: () > import(/views/demos/nested/menu1/index), // Parent router-vie…...

编程日记 2025/5/19 10:13:59

Kerberoasting 离线爆破攻击

当域用户请求某个域内服务后&#xff0c;kdc 通常会返回一个加密的 st 服务票据&#xff0c;此 st 服务票据被服务 hash 加密&#xff0c;当我们将使用密码字典派生的多个 hash 值来尝试解密 st 服务票据&#xff0c;如果能够揭秘成功&#xff0c;则说明字典中存在目标服务账号…...

编程日记 2025/5/19 23:50:55

无人机双目视觉鲁棒定位方法！

无人机双目视觉鲁棒定位方法是一种先进的定位技术&#xff0c;它利用两个摄像头&#xff08;即双目相机&#xff09;模拟人的视觉系统&#xff0c;通过视差来确定物体的位置。这种方法在无人机定位领域具有广泛的应用前景&#xff0c;特别是在GPS信号拒止或弱纹理环境中&#x…...

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

vulnhub靶场——Log4j2

第一步:搭建靶场环境 #开启环境 cd vulhub/log4j/CVE-2021-44228 docker-compose up -d 来到网站首页 第二步:搭建一个dnslog平台上获取我们注入的效果 第三步:发现 /solr/admin/cores?action 这里有个参数可以传 我们可以看到留下了访问记录并且前面的参数被执行后给我们回…...

编程日记 2025/5/16 11:44:23

第十六章 C++ 字符串

C 字符串 C 提供了以下两种类型的字符串表示形式&#xff1a; C 风格字符串C 引入的 string 类类型 C 风格字符串 C 风格的字符串起源于 C 语言&#xff0c;并在 C 中继续得到支持。字符串实际上是使用 null 字符 终止的一维字符数组。因此&#xff0c;一个以 null 结尾的…...

编程日记 2025/5/17 13:47:29

centos权限大集合，覆盖多种权限类型，解惑权限后有“. + t s”问题！

在 CentOS 系统中&#xff0c;权限管理是操作系统的核心功能之一&#xff0c;确保不同用户和进程对文件、目录以及设备的访问被合理控制。 权限系统主要包括传统的 Unix 权限模型、特殊权限&#xff08;SetUID、SetGID、Sticky 位&#xff09;和更精细的访问控制列表&#xff…...

编程日记 2025/5/20 10:13:21

【k8s】访问etcd

1. 配置 export.sh export ETCDCTL_API3 # Kubernetes 1.13 使用 API v3 export ETCDCTL_ENDPOINTShttps://[2023:145:246:270::3]:2379 # etcd API endpoint&#xff0c;通常为集群内的 etcd 服务地址 export ETCDCTL_CACERT/etc/kubernetes/certs/ca.crt # CA 证书文件 …...

编程日记 2025/5/19 7:17:00

【教程宝典】基于“遥感+”蓝碳储量估算、红树林信息提取实践技术应用与科研论文写作

“遥感”助推蓝碳生态系统碳储量调查简介(1)蓝碳生态系统碳储量研究背景 红树林、海草床和盐沼是海岸带最具固碳效率的三大生态系统&#xff0c;统称为“蓝色碳汇”。虽然这三类生态系统的覆盖面积不到海床的0.5%&#xff0c;植物生物量只占陆地植物生物量的0.05%&#xff0c;…...

编程日记 2025/5/4 3:52:09

运动健康中的实体和关系

1. 实体类别 1.1 个人健康相关实体 个人&#xff08;Person&#xff09;&#xff1a;参与体育活动的个体&#xff0c;如运动员、健身爱好者、患者等。健康状况&#xff08;HealthStatus&#xff09;&#xff1a;描述个人的身体状态&#xff0c;如体重、血压、心率、身体质量指…...

编程日记 2025/5/18 7:38:41

【进阶编程】MVC和MVVM实现前后端分离的实现

在 WPF 开发中&#xff0c;通常使用 MVVM&#xff08;Model-View-ViewModel&#xff09;架构来分离视图和业务逻辑&#xff0c;但在某些情况下&#xff0c;你可能希望将 MVC&#xff08;Model-View-Controller&#xff09;模式与 MVVM 结合使用。这种结合有时是为了兼顾不同的架…...

编程日记 2025/5/14 10:30:46

ML-Agents 概述（二）

注&#xff1a;本文章为官方文档翻译&#xff0c;如有侵权行为请联系作者删除 ML-Agents Overview - Unity ML-Agents Toolkit–原文链接 ML-Agents 概述&#xff08;一&#xff09; ML-Agents 概述&#xff08;二&#xff09; 训练方法&#xff1a;特定环境 除了上一节介绍的…...

编程日记 2025/5/19 0:37:46