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

【css酷炫效果】纯CSS实现悬浮弹性按钮

【css酷炫效果】纯CSS实现悬浮弹性按钮

  • 创作背景
  • html结构
  • css样式
  • 完整代码
  • 效果图

想直接拿走的老板,链接放在这里:https://download.csdn.net/download/u011561335/90492020

创作随缘,不定时更新。

创作背景

刚看到csdn出活动了,赶时间,直接上代码。

html结构

    <button class="elastic-button">点我点我!</button>

css样式

        body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f0f0;}.elastic-button {padding: 15px 30px;font-size: 16px;color: #fff;background-color: #007BFF;border: none;border-radius: 5px;cursor: pointer;transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), box-shadow 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);}.elastic-button:hover {transform: translateY(-10px);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);}.elastic-button:active {transform: translateY(2px);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);transition: transform 0.1s, box-shadow 0.1s;}

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS Elastic Button</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f0f0;}.elastic-button {padding: 15px 30px;font-size: 16px;color: #fff;background-color: #007BFF;border: none;border-radius: 5px;cursor: pointer;transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), box-shadow 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);}.elastic-button:hover {transform: translateY(-10px);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);}.elastic-button:active {transform: translateY(2px);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);transition: transform 0.1s, box-shadow 0.1s;}</style>
</head>
<body><button class="elastic-button">点我点我!</button>
</body>
</html>

效果图

在这里插入图片描述

相关文章:

【css酷炫效果】纯CSS实现悬浮弹性按钮

【css酷炫效果】纯CSS实现悬浮弹性按钮 缘创作背景html结构css样式完整代码效果图 想直接拿走的老板&#xff0c;链接放在这里&#xff1a;https://download.csdn.net/download/u011561335/90492020 缘 创作随缘&#xff0c;不定时更新。 创作背景 刚看到csdn出活动了&…...

MySQL自动化配置工具开发:探索如何用脚本实现MySQL一键安装与配置,提升运维效率

引言 MySQL作为最流行的开源关系型数据库之一,广泛应用于各类业务场景。然而,手动安装和配置MySQL不仅耗时,还容易出错。为了提高运维效率,开发一款MySQL自动化配置工具显得尤为重要。本文将探索如何通过脚本实现MySQL的一键安装与配置,并提供具体的配置脚本文档和关键参…...

如何查看安卓版本号的方法(例如查看是13、12、11、10...)

开发过程中需要了解到安卓版本号是多少&#xff0c;那么以下有三种方法可以知晓安卓手机的Android版本号。 方法1&#xff1a;手机设置直接查看 1.打开【设置】 --> 滑动到手机最底部 --> 点击【关于手机】或 【系统】--> 选择【Android版本】 2.直接查看版本号&am…...

ubuntu 解挂载时提示 “umount: /home/xx/Applications/yy: target is busy.”

问题如题所示&#xff0c;我挂载一个squanfs文件系统到指定目录&#xff0c;当我使用完后&#xff0c;准备解挂载时&#xff0c;提示umount: /home/xx/Applications/yy: target is busy.&#xff0c;具体的如图所示&#xff0c; 这种提示通常是表明这个路径的内容正在被某些进…...

Java XML与JSON相互转换详解

目录 一、为什么需要XML与JSON转换二、使用Jackson库进行转换1. 添加依赖2. XML转JSON3. JSON转XML三、注意事项在现代软件开发中,数据格式的转换是一项常见的任务,特别是在处理不同系统或服务之间的数据交换时。XML(可扩展标记语言)和JSON(JavaScript对象表示法)是两种广…...

[AI速读]用持续集成(CI)优化芯片验证环境:Jenkins与EDA工具的实战指南

在芯片验证中,回归测试(Regression Test)是确保设计稳定性的关键步骤。但随着设计复杂度增加,手动管理海量测试用例、分析日志和覆盖率数据变得异常耗时。本文将介绍如何利用持续集成(CI)工具Jenkins,结合EDA验证环境(如Cadence vManager),实现自动化测试与结果分析,…...

Java-SpringBootWeb入门、Spring官方脚手架连接不上解决方法

一. Spring 官网&#xff1a;Spring | Home Spring发展到今天已经形成了一种开发生态圈&#xff0c;Spring提供了若干个子项目&#xff0c;每个项目用于完成特定的功能(Spring全家桶) Spring Boot可以帮助我们非常快速的构建应用程序、简化开发、提高效率 。 二. Spring Boot入…...

WEB攻防-PHP反序列化-字符串逃逸

目录 前置知识 字符串逃逸-减少 字符串逃逸-增多 前置知识 1.PHP 在反序列化时&#xff0c;语法是以 ; 作为字段的分隔&#xff0c;以 } 作为结尾&#xff0c;在结束符}之后的任何内容不会影响反序列化的后的结果 class people{ public $namelili; public $age20; } var_du…...

Android第五次面试总结(网络篇)

一、引言&#xff1a;为什么需要 DNS&#xff1f; 在浏览器输入www.example.com的瞬间&#xff0c;一场跨越全球的数字接力赛悄然启动。DNS&#xff08;域名系统&#xff09;如同互联网的 “电话号码簿”&#xff0c;将人类可读的域名转化为机器可识别的 IP 地址。本文将以工程…...

全网首创/纯Qt/C++实现国标GB28181服务/实时视频/云台控制/预置位/录像回放和下载/事件订阅/语音对讲

一、前言说明 用纯Qt来实现这个GB28181的想法很久了&#xff0c;具体可以追溯到2014年&#xff0c;一晃十年都过去了&#xff0c;总算是整体的框架和逻辑都打通了&#xff0c;总归还是杂七杂八的事情多&#xff0c;无法静下心来研究具体的协议&#xff0c;最开始初步了解协议后…...

详解MySQL的事务实现机制

MySQL事务实现机制 1. 锁机制2. Redo Log&#xff08;重做日志&#xff09;3. Undo Log&#xff08;撤销日志&#xff09;4. MVCC&#xff08;多版本并发控制&#xff09;综合事务处理流程 在MySQL中&#xff08;主要以InnoDB为例&#xff09;&#xff0c;事务的实现依赖于多个…...

什么是 BA ?BA怎么样?BA和BI是什么关系?

前几天有朋友在评论区提到了BA这个角色&#xff0c;具体是干什么的&#xff0c;我大概来说一下。 什么是BA BA 英文的全称是Business Analyst&#xff0c;从字面上意思就是商业分析师&#xff0c;做过商业智能BI项目的应该比较了解。实际上以我个人的经验&#xff0c;BA 的角…...

Junit在测试过程中的使用方式,具体使用在项目测试中的重点说明

JUnit 是一个广泛使用的 Java 单元测试框架,主要用于编写和运行可重复的测试。以下是 JUnit 在项目测试中的使用方式和重点说明: 1. 基本使用 场景:测试一个简单的 Java 类。 示例: import org.junit.Test; import static org.junit.Assert.*;public class CalculatorTe…...

网络安全之前端学习(HTML篇)

前言&#xff1a;网络安全中有一个漏洞叫xss漏洞&#xff0c;就是利用网页引发弹窗&#xff0c;这就要求我们看得懂源码&#xff0c;所以我会持续更新前端学习&#xff0c;可以不精通&#xff0c;但是一定要会&#xff0c;主要掌握HTML&#xff0c;css&#xff0c;js这三项技术…...

Lineageos 22.1(Android 15)实现负一屏

一、前言 方案是参考的这位大佬的&#xff0c;大家可以去付费订阅支持一波。我大概理一下Android15的修改。 大佬的方案代码 二、Android15适配调整 1.bp调整&#xff0c;加入aidl引入&#xff0c;这样make之后就可以索引代码了 filegroup {name: "launcher-src"…...

Redisson分布式锁(超时释放及锁续期)

&#x1f353; 简介&#xff1a;java系列技术分享(&#x1f449;持续更新中…&#x1f525;) &#x1f353; 初衷:一起学习、一起进步、坚持不懈 &#x1f353; 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正&#x1f64f; &#x1f353; 希望这篇文章对你有所帮助,欢…...

SQL授予用户查询某个模式或者具体某个表

例如&#xff1a;需要给sjzt授权查询这个模式下的这个表的操作 数据库&#xff1a;DB_HZ_HYZHFZ 模式&#xff1a;hn_proxy 服务注册表&#xff1a;hn_proxy."serverrg" 账号:sjzt -- 登录到目标数据库 DB_HZ_HYZHFZ -- 授予权限给账号 sjzt 在模式 hn_proxy 中访问…...

Burp Suite 代理配置与网络通信

目录 1. 引言 2. Burp 代理基础配置 2.1 浏览器代理设置 2.2 Burp 监听端口配置 2.3 常见错误排查 3. 网络问题解决 3.1 端口占用检查 3.2 防火墙配置 3.3 证书信任问题 4. 虚拟机环境配置 4.1 NAT 模式与端口转发 4.2 桥接模式配置 4.3 跨设备访问测试 5. 技术概…...

PyCharm安装redis,python安装redis,PyCharm使用失败问题

报错信息 Usage: D:\wb2\wbrj_pys\venv\Scripts\python.exe -m pip install [options] [package-index-options] … D:\wb2\wbrj_pys\venv\Scripts\python.exe -m pip install [options] -r [package-index-options] … D:\wb2\wbrj_pys\venv\Scripts\python.exe -m pip instal…...

使用命令行工具控制wireshark对抓包文件进行针对性处理的总结

近日&#xff0c;工作中有开发对抓包文件进行针对性过滤的小程序的需求&#xff0c;兜兜转转踩了很多坑后还是绕回了wireshark。 作为最出名的开源软件之一&#xff0c;wireshark也具有使用命令行进行操作的功能&#xff0c;这就是我们今天会总结到的“tshark.exe”。 通常&a…...

【STM32实物】基于STM32的太阳能充电宝设计

基于STM32的太阳能充电宝设计 演示视频: 基于STM32的太阳能充电宝设计 硬件组成: 系统硬件包括主控 STM32F103C8T6、0.96 OLED 显示屏、蜂鸣器、电源自锁开关、温度传感器 DS18B20、继电器、5 V DC 升压模块 、TB4056、18650锂电池、9 V太阳能板、稳压降压 5 V三极管。 功能…...

NLP 与常见的nlp应用

自然语言处理&#xff08;NLP&#xff09;是一个广泛的领域&#xff0c;它不仅包括自然语言理解&#xff08;NLU&#xff09;&#xff0c;还涉及一系列其他任务和子领域。以下是NLP领域中的主要组成部分及其相关任务&#xff1a; 1. 自然语言理解&#xff08;NLU&#xff09; …...

基于javaweb的SSM+Maven宠物领养宠物商城流浪动物管理系统与实现(源码+文档+部署讲解)

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论…...

Java数据类型 Arrays VS ArraysList VS LikedList 解析

在学习Java过程中&#xff0c;在刷题时总是搞不清楚这三种数据结构的区别&#xff0c;打算写篇文章记录一下 Arrays VS ArrayList ArrayList VS LinkedList 总结 Arrays VS ArrayList ArraysArrayList类型Java的基本数据类型Java集合框架中的一个类&#xff0c;实现了List接…...

C++进阶(一)

个人主页&#xff1a;PingdiGuo_guo 收录专栏&#xff1a;C干货专栏 前言 本篇博客是讲解函数的重载以及引用的知识点的。 文章目录 前言 1.函数重载 1.1何为函数重载 1.2函数重载的作用 1.3函数重载的实现 2.引用 2.1何为引用 2.2定义引用 2.3引用特性 2.4常引用 2…...

Elasticsearch 在航空行业:数据管理的游戏规则改变者

作者&#xff1a;来自 Elastic Adam La Roche 数字化客户体验不再是奢侈品&#xff0c;而是欧洲航空公司必不可少的需求。它推动了客户满意度&#xff0c;提升了运营效率&#xff0c;并创造了可持续的竞争优势。随着行业的不断发展&#xff0c;优先投资前沿数字技术和平台的航空…...

Powershell WSL部署ubuntu22.04.5子系统

前提条件WSL 安装 wsl 安装参考1wsl 安装csdn参考2wsl 百度网盘离线下载 本地目录安装ubuntu22.04.5 子系统 powershell 管理员打开执行(实现,下载安装ubuntu子系统,用户创建,远程ssh登录设置,防火墙端口开放)子系统IP 查看方法wsl...

华为网路设备学习-16 虚拟路由器冗余协议(VRRP)

VRRP是针对干线上三层网络设备&#xff08;如&#xff1a;路由器、防火墙等&#xff09;的网络虚拟化技术&#xff0c;提供冗余和状态监测等功能。确保在网络中的单点故障发生时&#xff0c;能够快速切换到备份设备&#xff0c;从而保证网络通信的连续性和可靠性。‌ VRRP通过…...

SQLark中如何进行数据筛选与排序

本文将为你介绍在 SQLark 中如何进行数据筛选与排序&#xff0c;掌握这些操作能够极大提升你的工作效率。 SQLark官网链接:www.sqlark.com 数据筛选 在数据库操作中&#xff0c;数据筛选是一项关键功能&#xff0c;它依据特定条件对数据进行过滤&#xff0c;帮助用户从海量数据…...

slq-labs日志

上次写了第五关的布尔盲注&#xff0c;和双查询报错注入&#xff0c;还有其他报错注入的方法 一.extractvalue函数 extractvalue函数 原理 extractvalue 是一个在 XML 数据中提取值的 MySQL 内置函数。它的语法为&#xff1a; EXTRACTVALUE(xml, xpath_expr)xml 是 XML 字符…...

Webrtc编译官方示例实现视频通话

Webrtc编译官方示例实现视频通话 前言 webrtc官网demo中给了一个供我们学习和应用webrtc的一个很好的例子&#xff1a;peerconnection&#xff0c;这期我们就来编译和运行下这个程序看看视频通话的效果以。 1、打开源码工程 继上期源码编译完成后&#xff0c;我们使用vs打开…...

对接SaToken @SaCheckEL 鉴权注解

对接SaToken SaCheckEL 鉴权注解 文章目录 对接SaToken SaCheckEL 鉴权注解前言一、引入插件和配置SaToken属性配置二、配置1.自定义SaTokenInterceptor并注入Bean2.WebMvcConfig配置SaTokenInterceptor&#xff0c;拦截所有请求路径 三、重载SaToken权限接口和方法注入SaCheck…...

【数据结构】顺序表(附源码)

数据结构之顺序表 1、线性表2、顺序表2.1 概念与结构2.2 顺序表的分类 3、动态顺序表3.1 结构3.2 初始化3.3 容量检查3.4 尾部插入数据3.5 删除尾部数据3.6 头部插入数据3.7 头部删除数据3.8 任意位置pos插入数据3.9 任意位置pos删除数据3.10 查找 4、动态顺序表实现的源码 1、…...

java使用Apache POI 操作word文档

项目背景&#xff1a; 当我们对一些word文档&#xff08;该文档包含很多的标题比如 1.1 &#xff0c;1.2 &#xff0c; 1.2.1.1&#xff0c; 1.2.2.3&#xff09;当我们删除其中一项或者几项时&#xff0c;需要手动的对后续的进行补充。该功能主要是对标题进行自动的补充。 具…...

【Linux网络编程】网络基础

目录 1、OSI分层思想2、数据的封装3、ip地址ipv4的ip地址分类&#xff1a;为什么这样划分&#xff1f;举例 4、端口号5、tcp三次握手为什么需要三次握手&#xff1f;tcp连接的标识为什么 IP 地址不能单独标识一条连接&#xff1f; 6、tcp四次挥手为什么需要四次挥手为什么需要三…...

国内首家,百度智能云千帆AppBuilder全面兼容MCP协议

百度智能云千帆 AppBuilder 已兼容 MCP 协议&#xff01;作为国内首家支持 MCP 协议的大模型应用开发平台&#xff08;Claude、LangGraph、Cursor、Cline、N8N等海外平台已支持&#xff09;&#xff0c;千帆 AppBuilder 完成兼容后&#xff0c;用户可通过千帆 AppBuilder 轻松调…...

eclipse [jvm memory monitor] SHOW_MEMORY_MONITOR=true

eclipse虚拟机内存监控设置SHOW_MEMORY_MONITORtrue D:\eclipse-jee-oxygen-2-win32-x86_64\workspace\.metadata\.plugins\org.eclipse.core.runtime\.settings org.eclipse.ui.prefs (文件比较多&#xff0c;别找错了&#xff09; SHOW_MEMORY_MONITORtrue 重启 -xms 1024…...

k8s中的组件

1.namespace Namespace 用于将集群资源划分为不同的逻辑组&#xff0c;方便管理和隔离 kubectl get namespace 查看所有逻辑组 kubectl describe namespace <namespace-name> 查看某个逻辑组信息详情 kubectl create namespace ... 创建逻辑组 kubectl delete names…...

单目3d detection算法记录

1、centernet object as points 这篇文章的核心单目3d检测主要是利用中心点直接回归出3d模型的所有属性&#xff0c;head共享整个backbone&#xff0c;其中3d属性包括&#xff1a;2d目标中心点、2dw和h、2d offsets、3doffsets、3d dimmession、rot还有depth。 其中对应的dep…...

vue3二次封装tooltip实现el-table中的show-overflow-tooltip效果

开发过程中遇到需要根据后端返回的数据长度来判断是否需要使用el-tooltip的情况&#xff0c;想到el-table里面就有这种交互效果&#xff0c;如果不论文字是否超出容器长度都展示tooltip的话&#xff0c;交互效果难免会差很多&#xff0c;所以二次封装了这个组件&#xff1a; 给…...

STM32八股【1】-----启动流程和startup文件理解

启动流程 知识点 MCU 上电复位。MSP从向量表第0个地址读取一个32位&#xff08;2字节&#xff09;的值并保存&#xff0c;该值为栈顶地址。PC计数器从第1个地址读取一个两字节的值并保存&#xff0c;该值为程序入口&#xff0c;一般是Reset_Handler。想了解FLASH地址映射可以…...

Go语言中package的使用规则《二》

在 Go 语言中&#xff0c;包&#xff08;Package&#xff09; 是代码组织和复用的核心单元。以下是其定义、引用规则及使用习惯的详细说明&#xff1a; 一、包的定义规则 目录与包名 一个包对应一个目录&#xff08;文件夹&#xff09;&#xff0c;目录名通常与包名一致。 包名…...

初级:控制流程面试题精讲

一、引言 在Java开发中&#xff0c;控制流程语句是构建程序逻辑的基础。面试官通过相关问题考察候选人对if-else、switch、循环等语句的理解和运用能力&#xff0c;以及在复杂业务场景下合理选择控制流程语句的水平。本文将深入剖析常见的控制流程面试题&#xff0c;结合实际开…...

HTTP 失败重试(重发)方案

在 Qt 网络开发中&#xff0c;使用 QNetworkAccessManager 进行 HTTP 请求时&#xff0c;可能会遇到网络超时、服务器错误等情况。为了提高请求的可靠性&#xff0c;可以实现 HTTP 失败重试&#xff08;重发&#xff09; 机制。下面介绍几种常见的 失败重发方案&#xff1a; 单…...

TNNLS 2024 | 基于残差超密集网络的高光谱图像空间光谱融合方法

A Spatio-Spectral Fusion Method for Hyperspectral Images Using Residual Hyper-Dense Network IEEE Transactions on Neural Networks and Learning Systems 2024 这篇文章的研究背景是针对高光谱图像&#xff08;HS&#xff09;与全色图像&#xff08;PAN&#xff09;的…...

深入探究 JVM 堆的垃圾回收机制(二)— 回收

GC Roots 枚举需要遍历整个应用程序的上下文&#xff0c;而在进行可达性分析或者垃圾回收时&#xff0c;如果我们还是进行全堆扫描及收集&#xff0c;那么会非常耗时。JVM 将堆分为新生代及老生代&#xff0c;它们的回收频率及算法不一样。 1 回收算法 在进行可达性分析时&am…...

【ELK】节省存储 之 压缩存储方式调整

目录 集群版本&#xff1a; 7.17.6 解释几个概念&#xff1a; 段&#xff08;Segment&#xff09; 合并(Merge) 索引设置&#xff1a; 压缩方式(index.codec)&#xff1a; 测试设置前提条件 对比 在创建的时候指定压缩类型&#xff08;index.codec&#xff09; 对比 在…...

MATLAB 控制系统设计与仿真 - 26

状态空间控制系统概述 状态空间描述 现代控制理论是建立在状态空间基础上的控制系统分析和设计理论&#xff0c;它用状态变量来刻画系统的内部特征&#xff0c;用‘一节微分方程组’来描述系统的动态特性。系统的状态空间模型描述了系统输入/输出与内部状态之间的关系&#x…...

下载与快速上手 NVM:Node.js 版本管理工具

一、准备工作&#xff1a;卸载旧版 Node.js 重要提示&#xff1a;在安装 NVM 前&#xff0c;请先彻底删除已安装的 Node.js&#xff0c;避免路径冲突&#xff1a; 检查安装路径 bash where node常见路径&#xff1a; C:\Program Files\nodejs\C:\Users\用户名\AppData\Local\n…...

SQL Server Management Studio(SSMS)安装教程

目录 一、SSMS的下载 二、SSMS 的安装 三、连接服务器 四、卸载 SSMS 一、SSMS的下载 1.进入 SQL Server Management Studio 官方下载页面&#xff1a;SQL Server Management Studio点击进入下载页面 2.点击链接开始下载&#xff0c;浏览器右上角会显示下载进度&#xff1b;…...