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

HTMLCSS：惊！3D 折叠按钮

news 2025/11/19 8:33:35

这段代码创建了一个具有 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…...

编程日记 2024/12/26 4:05:54

SDK 指南

在前端开发中&#xff0c;SDK&#xff08;Software Development Kit&#xff0c;软件开发工具包&#xff09;是一个用于帮助开发者在特定平台、框架或技术栈中实现某些功能的工具集。 1. SDK 是什么&#xff1f; SDK 是一种开发工具包&#xff0c;它提供了开发人员实现某些功…...

编程日记 2024/12/26 4:04:52

Web 应用项目开发全流程解析与实战经验分享

目录 一、引言 二、需求分析 三、技术选型 四、架构设计 五、开发实现 六、测试优化 七、部署上线 八、实战经验分享 九、总结 一、引言 在当今数字化时代&#xff0c;Web 应用已经深入到我们生活和工作的各个角落。从社交网络到电子商务&#xff0c;从在线办公到娱乐…...

编程日记 2024/12/26 4:02:51

WPS中插入矩阵的方法

WPS中插入矩阵的方法&#xff1a; 1、先选择插入公式中的矩阵中的第二个括号矩阵 选中矩阵右键&#xff0c;点击插入 点击在此后插入列和在此后插入行&#xff0c;会得到3x3矩阵&#xff0c;如图 分别点击两次会得到4x4矩阵&#xff0c;如图&#xff0c;可以画出4x4矩阵...

编程日记 2024/12/26 4:00:49

Python调用R语言中的程序包来执行回归树、随机森林、条件推断树和条件推断森林算法

要使用Python调用R语言中的程序包来执行回归树、随机森林、条件推断树和条件推断森林算法&#xff0c;重新计算中国居民收入不平等&#xff0c;并进行分类汇总&#xff0c;我们可以使用rpy2库。rpy2允许在Python中嵌入R代码并调用R函数。以下是一个详细的步骤和示例代码&#x…...

编程日记 2024/12/26 3:59:48

uniapp input苹果中文键盘输入拼音直接切换输入焦点监听失效

问题&#xff1a; uniapp微信小程序&#xff0c;苹果手机中文键盘状态下&#xff0c;输入字母时&#xff0c;不点击确定也不点击空白处&#xff0c;直接切换到下一个input输入框&#xff0c;UI界面会保留上个输入框输入的内容&#xff0c;但input、blur事件监听到的值都是空&a…...

编程日记 2024/12/26 3:58:47

多智能体/多机器人网络中的图论法

一、引言 1、网络科学至今受到广泛关注的原因&#xff1a; &#xff08;1&#xff09;大量的学科&#xff08;尤其生物及材料科学&#xff09;需要对元素间相互作用在多层级系统中所扮演的角色有更深层次的理解&#xff1b; &#xff08;2&#xff09;科技的发展促进了综合网…...

编程日记 2024/12/26 3:55:43

华为：数字化转型只有“起点”，没有“终点”

上个月&#xff0c;我收到了一位朋友的私信&#xff0c;他询问我是否有关于华为数字化转型的资料。幸运的是&#xff0c;我手头正好收藏了一些&#xff0c;于是我便分享给他。 然后在昨天&#xff0c;他又再次联系我&#xff0c;并感慨&#xff1a;“如果当初我在进行企业数字…...

编程日记 2024/12/26 3:54:41

centos server系统新装后的网络配置

当前状态&#xff1a; ping www.baidu.com报错 1、检查IP ip addr show记录要编辑的网卡 link/ether 后的XX:XX:XX:XX:XX:XX号 2、以em1为例&#xff1a; vi /etc/sysconfig/network-scripts/ifcfg-em1&#xff0c;新增如下行&#xff1a; HWADDRXX:XX:XX:XX:XX:XX(具体值…...

编程日记 2024/12/26 3:53:40

【问题实录】服务器ping不通win11笔记本

项目场景 测试服务器和win11笔记本之间网络是否通常 问题描述 服务器ping不通win11笔记本&#xff0c;win11笔记本可以ping通服务器 解决方案 1、打开&#xff1a;控制面板\系统和安全\Windows Defender 防火墙 2、点击“高级设置”&#xff0c;然后点击“入站规则”&…...

编程日记 2024/12/26 3:46:35

WEB入门——文件上传漏洞

文件上传漏洞 一、文件上传漏洞 1.1常见的WebShell有哪些&#xff1f;1.2 一句话木马演示1.2 文件上传漏洞可以利用需满足三个条件1.3 文件上传导致的危害 二、常用工具 2.1 搭建upload-labs环境2.2 工具准备 三、文件上传绕过 3.1 客户端绕过 3.1.1 实战练习 &#xff1a;upl…...

编程日记 2024/12/26 3:45:34

公交车信息管理系统：构建智能城市交通的基石

程序设计 本系统主要使用Java语言编码设计功能&#xff0c;MySQL数据库管控数据信息&#xff0c;SSM框架创建系统架构&#xff0c;通过这些关键技术对系统进行详细设计&#xff0c;设计和实现系统相关的功能模块。最后对系统进行测试&#xff0c;这一环节的结果&#xff0c;基本…...

编程日记 2024/12/26 3:42:29

jdk各个版本介绍

JDK&#xff08;Java Development Kit&#xff09;是Java开发者用于构建、测试和部署Java应用程序的工具包。随着Java语言的不断演进&#xff0c;JDK也经历了多个版本的更新。下面是对JDK各个主要版本的简要介绍&#xff1a; JDK 1.0 - 1.4&#xff08;经典时代&#xff09; •…...

编程日记 2024/12/26 3:40:27

分布式事务解决方案seata和MQ

seata之XA模式 特点&#xff1a;强一致性、会锁定资源。 seata之AT模式 seata之TCC模式 特点&#xff1a;对代码有侵入 MQ解决分布式事务 特点&#xff1a;效率高、实时性差 分布式事务的消息幂等 1、tokenredis保证幂等 2、分布式锁 分布式任务调度...

编程日记 2024/12/26 3:39:26

相机主要调试参数

解析度测试 - 解释如何衡量摄像头捕捉细节的能力&#xff0c;确保图像清晰。锐度评估 - 教你如何判断图像边缘的清晰程度&#xff0c;以优化视觉效果。色散与色彩还原 - 分析色彩准确性&#xff0c;确保所见即所得的色彩一致性。白平衡校正 - 确保在各种光源下拍摄的照片颜色自…...

编程日记 2024/12/26 3:38:24

【C++11】可变模板参数

目录 可变模板的定义方式 参数包的展开方式 递归的方式展开参数包 STL中的emplace相关接口函数 STL容器中emplace相关插入接口函数 ​编辑 模拟实现&#xff1a;emplace接口 C11的新特性可变参数模板能够让您创建可以接受可变参数的函数模板和类模板&#xff0c;相比 C9…...

编程日记 2024/12/26 3:37:22

AAAI-2024 | 大语言模型赋能导航决策！NavGPT：基于大模型显式推理的视觉语言导航

作者&#xff1a;Gengze Zhou, Yicong Hong, Qi Wu 单位&#xff1a;阿德莱德大学&#xff0c;澳大利亚国立大学 论文链接&#xff1a; NavGPT: Explicit Reasoning in Vision-and-Language Navigation with Large Language Models &#xff08;https://ojs.aaai.org/index.p…...

编程日记 2024/12/26 3:36:20

@HeadFontStyle注解属性介绍

HeadFontStyle 是一个自定义的 Java 注解&#xff0c;它用于指定 Excel 单元格字体的样式属性。这个注解可以应用于方法中&#xff0c;用来动态地设置 Excel 文件中单元格的字体样式。下面是 HeadFontStyle 注解中各个属性的详细介绍&#xff1a; 1. fontName (String) 类型:…...

编程日记 2024/12/26 3:34:18

Exchange ProxyLogon 攻击链利用详解

目录 ProxyLogon 攻击链 影响版本 CVE-2021-26855 SSRF 复现 验证是否存在漏洞 详细漏洞利用 CVE-2021–27065 任意文件写入复现 ProxyLogon 一键利用 CVE-2021-26855 与 CVE-2021-27065 是微软在2021年3月2日发布的高危漏洞公告。这套组合拳被称为ProxyLogon，可直接获…...

编程日记 2024/12/26 3:33:17

C++小碗菜之五：关键字static

“一个人的命运啊&#xff0c;当然要靠自我奋斗&#xff0c;但也要考虑到历史的行程。” ——2009年4月23日在视察中国联合工程公司时的讲话 目录 ​编辑 前言 static在局部作用域中的作用 给出例子&#xff1a; 修改上面给出的例子&#xff1a; 为什么不使用全局变量…...

编程日记 2024/12/26 3:32:16

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2025/11/18 1:29:42

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/11/17 0:33:49

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/11/17 0:25:54

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/10/1 2:59:48

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/8/27 18:01:27

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/11/18 18:58:44

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

编程新知 2025/11/16 23:24:26

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/9/30 16:23:57

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2025/11/18 10:01:27

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

编程新知 2025/11/17 9:54:41