HTMLCSS:惊!3D 折叠按钮

这段代码创建了一个具有 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图标在获得焦点和鼠标悬停时的样式,包括填充色和动画。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/495107.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

容器技术所涉及Linux内核关键技术

容器技术所涉及Linux内核关键技术 一、容器技术前世今生 1.1 1979年 — chroot 容器技术的概念可以追溯到1979年的UNIX chroot。它是一套“UNIX操作系统”系统&#xff0c;旨在将其root目录及其它子目录变更至文件系统内的新位置&#xff0c;且只接受特定进程的访问。这项功…

Git远程仓库的多人协作

目录 一.项目克隆 二.多人协作 1.创建林冲仓库 2.协作处理 3.处理冲突 三.分支推送协作 四.分支拉取协作 五.远程分支的删除 一.项目克隆 我们可以把远程项目克隆到本地形成一个本地的仓库 git clone https://github.com/txjava-teach/txjava-code.git //链接你自己的远…

Docker 部署 plumelog 最新版本 实现日志采集

1.配置plumelog.yml version: 3 services:plumelog:#此镜像是基于plumelog-3.5.3版本image: registry.cn-hangzhou.aliyuncs.com/k8s-xiyan/plumelog:3.5.3container_name: plumelogports:- "8891:8891"environment:plumelog.model: redisplumelog.queue.redis.redi…

Spring常见面试题总结

关于详细介绍&#xff0c;可以看我写的 ( Spring知识点) 这篇文章。 Spring 基础 什么是 Spring 框架? Spring 是一款开源的轻量级 Java 开发框架&#xff0c;旨在提高开发人员的开发效率以及系统的可维护性。 我们一般说 Spring 框架指的都是 Spring Framework&#xff0c…

Mac系统下 IDEA配置Maven本地仓库

1.为什么需要配置本地仓库&#xff1f; 在软件开发过程中&#xff0c;使用Maven工具进行依赖管理是常见的做法。Maven通过集中管理各种依赖库&#xff0c;能够帮助开发者在项目中轻松地引入所需的第三方库&#xff0c;并确保项目能够顺利构建和部署。然而&#xff0c;在使用Mav…

RGCL:A Review-aware Graph Contrastive Learning Framework for Recommendation

A Review-aware Graph Contrastive Learning Framework for Recommendation 解决的问题 基于评论的推荐可以自然地形成为具有来自相应用户项目评论的边特征的用户项目二分图。那么就可以利用评论感知图中独特的自监督信号来指导推荐的两个组件:用户-项目嵌入学习,用户-项目…

5、mysql的读写分离

主从复制 主从复制的含义 主从复制&#xff1a;在一个mysql的集群当中&#xff0c;至少3台&#xff0c;即主1台&#xff0c;从2台。 当有数据写入时&#xff0c;主负责写入本库&#xff0c;然后把数据同步到从服务器。 一定是在主服务器写入数据&#xff0c;从服务器的写入…

重生之我在异世界学编程之C语言:深入预处理篇(上)

大家好&#xff0c;这里是小编的博客频道 小编的博客&#xff1a;就爱学编程 很高兴在CSDN这个大家庭与大家相识&#xff0c;希望能在这里与大家共同进步&#xff0c;共同收获更好的自己&#xff01;&#xff01;&#xff01; 本文目录 引言正文一、预处理的作用与流程&#xf…

信创源代码加密的答案:信创沙箱

在信息化与工业化融合创新&#xff08;信创&#xff09;的背景下&#xff0c;企业面临着前所未有的数据安全挑战。SDC沙盒技术以其独特的隔离和保护机制&#xff0c;为信创环境提供了强有力的支持。以下是SDC沙盒在信创支持方面的优势&#xff0c;这些优势体现了其在保护企业数…

计算机网络B重修班-期末复习

[TOC] (计算机网络B重修班-期末复习&#xff09; 一、单选 &#xff08;20题&#xff0c;1分/题&#xff0c;共20分&#xff09; 二、判断 &#xff08;10题&#xff0c;1分/题&#xff0c;共10分&#xff09; 三、填空 &#xff08;10题&#xff0c;1分/题&#xff0c;共10…

结合实例从HCI层分析经典蓝牙连接和配对过程

我们知道&#xff0c;经典蓝牙BREDR的link key协商是在LMP层做的&#xff0c;那么蓝牙Host在鉴权的过程中&#xff0c;会跟BT SOC有哪些交互&#xff1a; 首次配对 在HCI Inuqiry找到想要配对的设备后&#xff0c;Host会调用HCI Create Connection命令去连接对方设备&#xf…

StartAI图生图局部重绘,让画面细节焕发新生!!

在设计的世界里&#xff0c;每一个细节都承载着我们的创意与心血。然而&#xff0c;有时我们总会遇到一些不尽如人意的画面细节&#xff0c;它们如同瑕疵般破坏了整体的和谐与美感。今天&#xff0c;我要向大家推荐一款强大的工具——StartAI的局部重绘功能&#xff0c;它正是我…

VMware vCenter保姆级安装部署(VMware VCenter Nanny Level Installation and Deployment)

VMware vCenter保姆级安装部署教程 VMware vCenter‌是由VMware开发的一款虚拟化管理平台&#xff0c;主要用于管理和监控虚拟化环境中的虚拟机、主机和存储资源。它提供了一个集中控制的平台&#xff0c;简化了虚拟化基础设施的管理工作&#xff0c;提高了资源利用率和灵活性…

蓝牙协议——音量控制

手机设置绝对音量 使用Ellisys查看如下&#xff1a; 使用Wireshark查看如下&#xff1a; 音量的量程是128&#xff0c;0x44的十进制是68&#xff0c;53%或54%音量的计算如下&#xff1a; 68 / 128 53.125%耳机设置绝对音量

如何完全剔除对Eureka的依赖,报错Cannot execute request on any known server

【现象】 程序运行报错如下&#xff1a; com.netflix.discovery.shared.transport.TransportException报错Cannot execute request on any known server 【解决方案】 &#xff08;1&#xff09;在Maven工程中的pom去掉Eureka相关的引用&#xff08;注释以下部分&#xff0…

从AI换脸到篡改图像,合合信息如何提升视觉内容安全?

本文目录 引言一、AI“真假之战”下的发展现状与考验挑战1.1 视觉内容安全现状与技术分类1.2视觉内容安全企业1.3视觉内容安全领域挑战 二、开山之石&#xff1a;引领视觉内容安全的创新之路2.1合合内容安全系统2.2发起编制相关技术规范2.3参与篡改检测挑战赛 三、视觉内容安全…

虚幻引擎结构之ULevel

在虚幻引擎中&#xff0c;场景的组织和管理是通过子关卡&#xff08;Sublevel&#xff09;来实现的。这种设计不仅提高了资源管理的灵活性&#xff0c;还优化了游戏性能&#xff0c;特别是在处理大型复杂场景时。 1. 场景划分模式 虚幻引擎采用基于子关卡的场景划分模式。每个…

log4j2漏洞复现(CVE-2021-44228)

靶场环境 步骤一&#xff1a;设置出战规则 步骤二&#xff1a;开启靶场 cd vulhub cd log4j cd CVE-2021-44228 docker-compose up -d docker ps 访问端口 靶机开启 步骤三&#xff1a;外带注入 获得dnslog 靶机访问dnslog 得到dnslog的二级域名信息 步骤四&#xff1a;构造…

美国加州房价数据分析01

1.项目简介 本数据分析项目目的是分析美国加州房价数据&#xff0c;预测房价中值。 环境要求&#xff1a; ancondajupyter notebookpython3.10.10 虚拟环境&#xff1a; pandas 2.1.1 numpy 1.26.1 matplotlib 3.8.0 scikit-learn1.3.1 2. 导入并探索数据集 通用的数据分析…

ML-Agents 概述(二)

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