css button 点击效果
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>button点击效果</title><style>#container {display: flex;align-items: center;justify-content: center;}.pushable {position: relative;background: transparent;padding: 0px;border: none;cursor: pointer;outline-offset: 4px;outline-color: deeppink;transition: filter 250ms;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.shadow {position: absolute;top: 0;left: 0;height: 100%;width: 100%;background: hsl(226, 25%, 69%);border-radius: 8px;filter: blur(2px);will-change: transform;transform: translateY(2px);transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);}.edge {position: absolute;top: 0;left: 0;height: 100%;width: 100%;border-radius: 8px;background: linear-gradient(to right,hsl(248, 39%, 39%) 0%,hsl(248, 39%, 49%) 8%,hsl(248, 39%, 39%) 92%,hsl(248, 39%, 29%) 100%);}.front {display: block;position: relative;border-radius: 8px;background: hsl(248, 53%, 58%);padding: 16px 32px;color: white;font-weight: 600;text-transform: uppercase;letter-spacing: 1.5px;font-size: 1rem;transform: translateY(-4px);transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);}.pushable:hover {filter: brightness(110%);}.pushable:hover .front {transform: translateY(-6px);transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);}.pushable:active .front {transform: translateY(-2px);transition: transform 34ms;}.pushable:hover .shadow {transform: translateY(4px);transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);}.pushable:active .shadow {transform: translateY(1px);transition: transform 34ms;}.pushable:focus:not(:focus-visible) {outline: none;}</style>
</head><body><div id="container"><button class="pushable"><span class="shadow"></span><span class="edge"></span><span class="front">梦雨生生</span></button></div><script></script>
</body></html>相关文章：
css button 点击效果
<!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><title>button点击效果</title><style>#container {display: flex;align-items: center;justify-content: center;}.pushable {position: relat…...
Missashe考研日记-day22
Missashe考研日记-day22 1 专业课408 学习时间：3h学习内容： 先把昨天关于进程调度的课后习题做了，然后花了挺长时间预习OS的最最最最重要的一部分——同步与互斥问题，这部分大二上课的时候就懵懵懂懂的，得认真再领悟…...
二十、FTP云盘
1、服务端 #include <stdio.h> #include <string.h> #include <stdlib.h> #include <sys/types.h> #include <unistd.h> #include <sys/types.h> /* See NOTES */ #include <sys/socket.h> #include <netinet/in.h>…...
SVM-RF回归预测matlab代码
数据为Excel股票预测数据。 数据集划分为训练集、验证集、测试集,比例为8：1：1 模块化结构: 代码将整个流程模块化，使得代码更易于理解和维护。不同功能的代码块被组织成函数或者独立的模块，使得代码逻辑清晰，结构化程…...
Lombok @Builder 注解的进阶玩法：自定义 Getter/Setter 方法全攻略
大家好呀！👋 今天我们来聊聊 Java 开发中超级实用的 Lombok 库，特别是它的 Builder 注解。很多小伙伴都用过 Builder 来简化对象的创建，但你们知道吗？当我们需要自定义 getter/setter 方法时，Builder 也能玩…...
C++每日训练 Day 16：构建 GUI 响应式信号机制（面向初学者）
📘 本篇我们将结合之前的 SignalHub 与 Dispatcher 机制，构建一个适合 GUI 场景的响应式信号系统。以按钮点击为例，构建一个跨线程安全的事件响应系统，配合协程挂起/恢复，让 UI 编程也能更优雅易读。本篇以通俗方式讲解…...
)
HCIP（OSPF ）(2)
OSPF 公共报文头部 版本（8bit）：目前常用版本为 2，用于标识 OSPF 协议版本。不同版本在功能特性和报文格式上可能存在差异，高版本通常会修复旧版本的漏洞、扩展功能，如支持更多类型的网络拓扑、增强安全性等…...
zynq7020 ubuntu_base 跟文件系统
整体流程 制作 ubuntu_base 镜像运行 petalinux 构建的 ramdisk 系统用 ramdisk 系统把 ubuntu_base 镜像烧录到 emmc从 emmc 跟文件系统 启动内核 制作 ubuntu_base 镜像 制作 ubuntu_base 镜像 sudo apt-get install qemu-user-static # 安装 q…...
51、Spring Boot 详细讲义（八） Spring Boot 与 NoSQL
3、 Elasticsearch 集成 3.1 Elasticsearch 概述 3.1.1 Elasticsearch 的核心概念 Elasticsearch 是一个开源的分布式搜索引擎，主要用于实时数据检索和分析。它的核心功能包括全文检索、结构化查询和分析大规模数据。 分布式搜索引擎： Elasticsearch 将数据分布存储在多个…...
什么是分库分表？
分库分表是一种数据库的分布式架构设计策略，以下是详细介绍： 概念 • 随着互联网的发展，数据量呈爆炸式增长，单个数据库服务器可能难以应对海量数据的存储和访问压力。分库分表就是将原本庞大的数据库拆分成多个小的数据库&#…...
如何让别人访问到自己本地项目？使用内网穿透工具简单操作下实现公网连接！
本地搭建服务器的系统项目网络地址，在没有公网IP使用的情况下，如何让局域网外别人访问到自己本地网站和应用呢？这里介绍一种通用的内网发布公网访问，且简便操作的内网穿透实现方法。 一、什么是内网穿透？ 1. 先了解内…...
第一篇：linux之虚拟环境与centos安装
第一篇：linux之虚拟环境与centos安装 文章目录 第一篇：linux之虚拟环境与centos安装一、vmware安装二、centos安装1、centos虚拟环境安装2、centos操作系统配置3、常见问题解决 一、vmware安装 我们想要运行linux，需要先安装一个虚拟软件&am…...
Redis List 的详细介绍
Redis List 的详细介绍 以下是 Redis List 的详细介绍，从基础命令、内部编码和使用场景三个维度展开： 一、基础命令 Redis List 支持双向操作（头尾插入/删除），适用于队列、栈等场景，以下是核心命令分类&a…...
docker占用磁盘100%
1. 立即清理方案 快速清理命令 bash 复制 # 停止Docker服务 sudo systemctl stop docker# 清理所有无用数据（包括未使用的镜像、容器、网络和卷） sudo docker system prune -a --volumes# 重启Docker sudo systemctl start docker 手动清理overlay2…...
20250417-vue-条件插槽
有时候我们需要根据内容是否被传入了插槽来渲染某些内容。 你可以结合使用 $slot 属性与 v-if 来实现。 在下面的示例中，我们定义了一个卡片组件，它拥有三个条件插槽：header、footer 和 default。当 header、footer 或 default 的内容存在时…...
【Unity】UI点击事件处理器
目录 前言脚本 前言 在开发过程中，经常需要监听UI的点击事件，这里我给大家整理一下，脚本直接挂在需要监听的节点上即可。 脚本 using UnityEngine; using UnityEngine.Events; using UnityEngine.EventSystems;namespace GameLogic {/// &…...
阿里云服务器的docker环境安装nacos--实践
阿里云服务器的docker环境安装nacos–实践 前提先安装mysql数据库，mysql中创建nacos所需的表以下为阿里云服务器docker环境安装，需在安全组开放8848端口 1. 拉取nacos-server镜像 //最新版本nacos docker pull nacos/nacos-server//或者指定nacos版本…...
)
每日算法-链表(23.合并k个升序链表、25.k个一组翻转链表)
一.合并k个升序链表 1.1题目描述 1.2题解思路 解法一：小根堆 我们可以先定义一个小根堆，将k个指针的头结点如堆，每次取堆顶元素尾插到newhead中，然后再pop()，接着push堆顶原来堆顶元素的下一个节点 重点分析&#…...
数据结构——反射、枚举以及lambda表达式
1. 反射 Java的反射（reflection）机制是在运⾏时检查、访问和修改类、接⼝、字段和⽅法的机制；这种动态获取信息以及动态调⽤对象⽅法的功能称为java语⾔的反射（reflection）机制。 用途 1. 框架开发 2. 注解处理 3.…...
深入理解 HTML5 Web SQL 数据库：用法、现状与替代方案
一、引言 在 Web 开发的领域中，客户端存储一直是一个关键的话题。HTML5 带来了多种客户端存储的解决方案，其中 Web SQL 数据库曾经是一个备受关注的选项。尽管如今它已被废弃，但了解其原理、使用方法以及为何被替代，对于 Web 开发者来说仍然具有重要的意义。本文将深入探讨…...
系统架构设计（一）：UML与软件架构
什么是系统架构设计？ 系统架构设计是对系统高层结构和行为的描述，包括： 系统的各个模块（组件）模块之间的交互方式数据流动、控制流动技术选型与部署策略 系统架构常见的风格有： 分层架构（La…...
极狐GitLab 外部流水线验证功能解读
极狐GitLab 是 GitLab 在中国的发行版，关于中文参考文档和资料有： 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 外部流水线验证 (BASIC SELF) 您可以使用外部服务在创建流水线之前进行验证。 极狐GitLab 发送一个 POST 请求到外部服务的…...
MCP和A2A是什么？
MCP和A2A是什么？ MCP（Model-Connect Protocol）和A2A（Agent-to-Agent）协议逐渐成为行业关注的焦点。这两个协议分别由Anthropic和谷歌推出，旨在提升智能体与外部工具、数据源及API资源的连接效率，…...
CNN卷积神经网络
一、什么是卷积神经网络（CNN） CNN（卷积神经网络）是一种专门用于处理图像的神经网络，尤其在图像识别任务中表现出色，例如识别手写数字。它通过多层结构逐步提取图像特征，最终输出识别结果。与传…...
生物信息学技能树（Bioinformatics）与学习路径
李升伟 整理 生物信息学是一门跨学科领域，涉及生物学、计算机科学以及统计学等多个方面。以下是关于生物信息学的学习路径及相关技能的详细介绍。 一、基础理论知识 1. 生物学基础知识 需要掌握分子生物学、遗传学、细胞生物学等相关概念。 对基因组结构、蛋白质…...
Obsidian无门槛简明教程
Obsidian简明教程 Markdown基本语法基本码字标题换行段落引用分割线代码块链接带名字的链接超链接插入图片 强调语法加粗斜体删除线高亮 列表有序列表无序列表任务列表 Obsidian核心用法软件基本使用安装仓库文件夹笔记编辑与查看 资源 核心插件双链标签 三方插件Various Compl…...
常用 Git 命令详解
Git 是一个强大的版本控制工具，广泛用于软件开发和团队协作中。掌握 Git 命令可以帮助开发者更高效地管理代码版本和项目进度。本文将介绍一些常用的 Git 命令，并提供示例以帮助你更好地理解和应用这些命令。 目录 常用命令 git clonegit stashgit pul…...
【HDFS入门】HDFS与Hadoop生态的深度集成：与YARN、MapReduce和Hive的协同工作原理
目录 引言 1 HDFS核心架构回顾 2 HDFS与YARN的集成 3 HDFS与MapReduce的协同 4 HDFS与Hive的集成 4.1 Hive架构与HDFS交互 4.2 Hive数据组织 4.3 Hive查询执行流程 5 HDFS在生态系统中的核心作用 6 性能优化实践 7 总结 引言 在大数据领域，Hadoop生态系统…...
多路由器通过三层交换机互相通讯（单臂路由+静态路由+默认路由版），通过三层交换机让pc端相互通讯
多路由器通过三层交换机互相通讯（单臂路由静态路由默认路由版） 先实现各个小框框里能够互通 哇咔 交换机1（二层交换机,可看配置单臂路由的文章) Switch>en Switch#conf t Switch(config)#int f0/1 Switch(config-if)#switchport access…...
电控---CMSIS概览
1. CMSIS库简介 CMSIS（Cortex Microcontroller Software Interface Standard，Cortex微控制器软件接口标准）是由ARM公司开发的一套标准化软件接口，旨在为基于ARM Cortex-M系列处理器（如Cortex-M0/M0/M3/M4/M7/M33等&am…...
2025.04.17【Stacked area】| 生信数据可视化：堆叠区域图深度解析
文章目录 生信数据可视化：堆叠区域图深度解析堆叠面积图简介为什么使用堆叠面积图如何使用R语言创建堆叠面积图安装和加载ggplot2包创建堆叠面积图的基本步骤示例代码 解读堆叠面积图堆叠面积图的局限性实际应用案例示例：基因表达量随时间变化 结论 生信…...
XSS之同源、跨域、内容安全策略
一、什么是同源策略 HTML的同源策略是浏览器的一个重要的安全机制，它用于限制一个源的网页如何与另一个源的资源进行交互，以此来减少夸站脚本攻击(XSS)和跨站请求伪造(CSRF)等安全风险。 同源的定义 若两个URL的协议（protocol）、…...
十三、系统设计
一、前言 二、架构设计概念 三、架构风格 四、面向服务的架构 五、微服务 六、MDA 七、软件界面设计 八、软件设计的构成 九、结构化设计 十、面向对象设计内容提要 十一、面向对象设计原则 十二、架构模式、设计模式与惯用法...
HTTP 2.0 协议特性详解
1. 使用二进制协议，简化传输的复杂性，提高了效率 2. 支持一个 TCP 链接发起多请求，移除 pipeline HTTP/2 移除了 HTTP/1.1中的管道化（pipeline）机制，转而采用多路复用（Multiplexing࿰…...
MySQL数据备份
一，为什么要进行数据备份 备份：能够防止由于机械故障以及人为误操作带来的数据丢失，例如将数据库文件保存在了其它地方。冗余： 数据有多份冗余，但不等备份，只能防止机械故障带来的数据丢失，例如…...
【Ai】CherryStudio 详细使用：本地知识库、MCP服务器
一、CherryStudio 介绍 Cherry Studio 是一款集多模型对话、知识库管理、AI 绘画、翻译等功能于一体的全能 AI 助手平台。 Cherry Studio 高度自定义的设计、强大的扩展能力和友好的用户体验，使其成为专业用户和 AI 爱好者的理想选择。无论是零基础用户还是开发者&…...
STM32F103_HAL库+寄存器学习笔记17 - CAN中断接收 + 接收CAN总线所有报文
导言 如上所示，本实验的目的是使能CAN接收FIFO1的挂号中断，使用CAN过滤器0与CAN接收FIFO1的组合，接收CAN总线上所有的CAN报文。 如上所示，STM32F103有两个3级深度的接收FIFO。外设CAN想要正常接收CAN报文，必须配置接收…...
kafka报错：The Cluster ID doesn‘t match stored clusterId Some in meta.properties
kafka启动报错： ERROR Fatal error during KafkaServer startup. Prepare to shutdown (kafka.server.KafkaServer) kafka.common.InconsistentClusterIdException: The Cluster ID kVSgfurUQFGGpHMTBqBPiw doesnt match stored clusterId Some(0Qftv9yBTAmf2iDPSl…...
QML 信号与槽
QML 信号与槽 QML 是 Qt 框架中用于构建现代化、流畅用户界面的声明式语言，其信号与槽（Signals and Slots）机制是实现组件间通信和交互的核心特性。与 C 的信号与槽类似，QML 的信号与槽提供了一种松耦合的方式，允许界…...
数据结构-栈
大家好，今天带来的是关于数据结构初阶中的栈和队列的内容，一起来看看吧！！！ 1.栈的概念 栈：一种特殊的线性表，其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为…...
Java 开发玩转 MCP：从 Claude 自动化到 Spring AI Alibaba 生态整合
摘要 本文以原理与示例结合的形式讲解 Java 开发者如何基于 Spring AI Alibaba 框架玩转 MCP，主要包含以下内容。 1. 一些 MCP 基础与快速体验（熟悉的读者可以跳过此部分） 2. 如何将自己开发的 Spring 应用发布为 MCP Server，验…...
CSS核心笔记001
目录 杂七杂八知识点样式优先级风格基本选择器通配符元素类ID 复合选择器交集选择器并集后代-孙子儿子兄弟属性各种属性选择器的应用 伪类动态伪类结构伪类否定伪类目标为类语言伪类UI伪类 伪元素 杂七杂八知识点 样式优先级 行内 > 内部 > 外部风格 紧凑风格基本选择…...
Windows快速切换屏幕/桌面
windows自带的切屏 需要winctrl 小键盘左右键 但是！ Windows使用还是键盘加鼠标舒服！ 教程 安装autohotkey 代码 ~LWin & LButton::{SendInput "^#{Left}" ; 发送 Win Ctrl Left (切换到左侧虚拟桌面) } ; 使用花括号包裹命令&a…...
ESP32- 开发笔记- 硬件设计-ESP32-C3基本电路
ESP32的最小电路 1 ESP32固件下载 ESP32 有多种下载（烧录）固件的方式，具体选择取决于开发环境和硬件连接。以下是常见的几种下载方式： 1.1 USB 串口下载（最常用） 适用场景：通过 USB 转串口芯片（如 CP2102、CH340）连接电脑，使用 esptool 或其他工具烧录固件。这里…...
webgl入门实例-09索引缓冲区示例
实现效果 实现代码 <!doctype html> <html lang"en"><head><meta charset"utf-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport"content"widthdevi…...
STM32 串口中断接收方式笔记：HAL_UART_Receive_IT vs __HAL_UART_ENABLE_IT
📘 STM32 串口中断接收方式笔记：HAL_UART_Receive_IT vs __HAL_UART_ENABLE_IT 🧠 1. 两者作用简述 函数/宏作用是否配置HAL状态是否调用Rx回调HAL_UART_Receive_IT()启动一次基于中断的串口接收任务✅ 是✅ 是__HAL_UART_ENABLE_IT()手动使…...
ubuntu 向右拖动窗口后消失了、找不到了
这是目前单显示器的设置，因为实际只有1个显示器，之前的设置如下图所示，有2个显示器，一个主显示器，一个23寸的显示器 ubuntu 22.04 系统 今天在操作窗口时，向右一滑，发现这个窗口再也不显示了、找…...
Selenium 获取 Web 页面信息的全指南
Selenium 获取 Web 页面信息的全指南 Selenium 是一个功能强大的自动化测试工具，但它也可以用于 web 页面信息的抓取和分析。本文将详细介绍如何使用 Selenium 来获取网页信息，并涵盖从环境搭建到高级技巧的各个方面。 目录 简介环境搭建Selenium 的基…...
stm32-lm75、SPI
一、lm75--温度传感器 LM75 是一种数字温度传感器和带有 2 线接口的热监视器（热看门狗），以下是其详细介绍： 一、核心功能与特点 温度检测与转换 内置带隙温度传感器和 Sigma-Delta 模数转换器，可实现 -55℃ 至 125℃ 温…...
介绍 Docker 的基本概念和优势，以及在应用程序开发中的实际应用。
Docker 是一种开源的容器化平台，可以帮助开发人员打包、部署和运行应用程序。Docker 的基本概念是利用容器来封装应用程序及其所有依赖项，使其能够在任何环境中快速、可靠地运行。 Docker 的优势包括： 轻量级和灵活性：Docker 容…...