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

html+css 实现水波纹按钮

news 文章来源：https://blog.csdn.net/qq_33650655/article/details/140701109 2024/9/20 5:52:21

前言：哈喽，大家好，今天给大家分享html+css 绚丽效果！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

支持一下

文章目录

效果
原理解析
- 上代码，可以直接复制使用
- - 目录
  - 图片
  - html
  - css

效果

水纹效果

原理解析

1.给每一个按钮添加一个hover效果，并给每一个按钮添加一个子元素带水波纹的背景图。
水纹子元素带背景图

2.当按钮上有鼠标时，hover效果触发，改变这个子元素（带背景图的位置和字体颜色）。
水纹hover时的动画

3.具体的变换参数，直接看代码，可以一键复制，查看效果

上代码，可以直接复制使用

图片

水纹图片

html

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>html+css 实现水波纹按钮</title><link rel="stylesheet" href="./style.css">
</head><body>
<div class="container"><h1 style="text-align: center;color:#000;margin-bottom: 50px;padding-top: 50px">html+css 实现水波纹按钮</h1><div class="btn-box"><div class="btn"><span>点赞</span><div class="wave"></div></div><div class="btn"><span>关注</span><div class="wave"></div></div><div class="btn"><span>收藏</span><div class="wave"></div></div><div class="btn"><span>转发</span><div class="wave"></div></div></div>
</div></body></html>

css

*{/* 初始化 */margin: 0;padding: 0;
}
.container{/* 100%窗口高度 */height: 100vh;/* 渐变背景 */background: linear-gradient(200deg,#e7f0fd,#accbee);
}.btn-box{width: 500px;/* 弹性布局 */display: flex;/* 横向排列 */flex-direction: row;/* 允许换行 */flex-wrap: wrap;margin: 0 auto;/* 平均分配宽度 */justify-content: space-around;
}
.btn-box .btn{/* 相对定位 */position: relative;width: 200px;height: 60px;line-height: 60px;text-align: center;color: #00adff;border: 2px solid #00adff;font-size: 18px;margin: 20px 0;/* 字间距 */letter-spacing: 4px;cursor: pointer;/* 溢出隐藏 */overflow: hidden;
}
.btn-box .btn span{position: relative;z-index: 1;/* 动画过渡 */transition: 1s;
}
.btn-box .btn .wave{/* 绝对定位 */position: absolute;top: calc(100% + 22px);left: 0;width: 100%;height: 100%;background-color: #00adff;transition: 1s;
}
.btn-box .btn .wave::before{content: "";position: absolute;top: -22px;left: 0;background-image: url("./wave.png");width: 100%;height: 22px;/* 执行动画：动画名 时长 线性的 无限次播放 */animation: animate 0.5s linear infinite;
}/* 定义动画 */
@keyframes animate {0%{background-position-x: 0;background-position-y: -22px;}100%{background-position-x: 118px;background-position-y: -22px;}
}/*hover时进行的动画*/
.btn-box .btn:hover .wave{top: 0;
}
.btn-box .btn:hover span{color: #fff;
}

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕

整理不易，点赞关注宝码香车

更多专栏订阅推荐：
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象（Date()）操作

html+css 实现水波纹按钮

前言：哈喽，大家好，今天给大家分享htmlcss 绚丽效果！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 文…...

编程日记 2024/7/28 4:10:13

科技与占星的融合：AI 智能占星师

本文由 ChatMoney团队出品在科技的前沿领域，诞生了一位独特的存在——AI占星师。它并非传统意义上的占星师，而是融合了先进的人工智能技术与神秘的占星学知识。这能够凭借其强大的数据分析能力和精准的算法，对星辰的排列和宇宙的能量进行深…...

编程日记 2024/7/28 4:07:09

判断字符串，数组方法

判断字符串方法在JavaScript中，可以使用typeof操作符来判断一个变量是否为字符串。 function isString(value) {return typeof value string; } 判断数组在JavaScript中，typeof操作符并不足以准确判断一个变量是否为数组，因为typeof会…...

编程日记 2024/7/28 4:06:08

SpringBoot Vue使用Jwt实现简单的权限管理

为实现Jwt简单的权限管理，我们需要用Jwt工具来生成token，也需要用Jwt来解码token，同时需要添加Jwt拦截器来决定放行还是拦截。下面来实现： 1、gradle引入Jwt、hutool插件 implementation com.auth0:java-jwt:3.10.3implementatio…...

编程日记 2024/7/28 4:05:06

java中的多态

多态基础了解： 面向对象的三大特征：封装，继承，多态。有了面向对象才有继承和多态，对象代表什么，就封装对应的数据，并提供数据对应的行为，可以把零散的数据和行为进行封装成一个整…...

编程日记 2024/7/28 4:00:01

【数据结构】：用Java实现链表

在 ArrayList 任意位置插入或者删除元素时，就需要将后序元素整体往前或者往后搬移，时间复杂度为 O(n)，效率比较低，因此 ArrayList 不适合做任意位置插入和删除比较多的场景。因此：java 集合中又引入了 LinkedList&…...

编程日记 2024/7/28 3:57:59

前端开发知识(三)-javascript

javascript是一门跨平台、面向对象的脚本语言。一、引入方式 1.内部脚本：使用<script> ，可以放在任意位置，也可以有多个，一般是放在<body></body>的下方。 2.外部脚本：单独编写.js文件&#xff…...

编程日记 2024/7/28 3:56:58

Windows图形界面(GUI)-MFC-C/C++ - MFC绘图

公开视频 -> 链接点击跳转公开课程博客首页 -> 链接点击跳转博客主页目录 MFC绘图绘图基础 CPaintDC 实例代码 MFC绘图绘图基础设备上下文（Device Context, DC）: 设备上下文是一个Windows GDI（图形设备接口&#xff09…...

编程日记 2024/7/28 3:54:56

51单片机-第五节-串口通信

1.什么是串口？ 串口是通讯接口，实现两个设备的互相通信。单片机自带UART，其中引脚有TXD发送端，RXD接收端。且电平标准为TTL（5V为1,0V为0）。 2.常见电平标准： （1）TTL电…...

编程日记 2024/7/28 3:51:53

【Linux常用命令】之df命令

Linux常用命令之df命令文章目录 Linux常用命令之df命令常用命令之df背景介绍总结作者简介听雨：一名在一线从事多年研发的程序员，从事网站后台开发，熟悉java技术栈，对前端技术也有研究，同时也是一名骑行爱好者。 D…...

编程日记 2024/7/28 3:48:50

2024年起重信号司索工(建筑特殊工种)证模拟考试题库及起重信号司索工(建筑特殊工种)理论考试试题

题库来源：安全生产模拟考试一点通公众号小程序 2024年起重信号司索工(建筑特殊工种)证模拟考试题库及起重信号司索工(建筑特殊工种)理论考试试题是由安全生产模拟考试一点通提供，起重信号司索工(建筑特殊工种)证模拟考试题库是根据起重信号司索工(建筑特…...

编程日记 2024/7/28 3:47:49

AWS全服务历史年表：发布日期、GA和服务概述一览（全）

我一直在尝试从各种角度撰写关于Amazon Web Services（AWS）的信息和魅力。由于我喜欢技术历史，这次我总结了AWS服务发布的历史年表。虽然AWS官方也通过“Whats New”发布了官方公告，但我一直希望能有一篇文章将公告日期、GA日期&…...

编程日记 2024/7/28 3:45:47

Leetcode 2824. 统计和小于目标的下标对数目

2824. 统计和小于目标的下标对数目 2824. 统计和小于目标的下标对数目一、题目描述二、我的想法一、题目描述给你一个下标从 0 开始长度为 n 的整数数组 nums 和一个整数 target ，请你返回满足 0 < i < j < n 且 nums[i] nums[j] < target 的下标对…...

编程日记 2024/7/28 3:43:43

自定义消息函数 afx_msg LRESULT CbaseMFCprojectDlg::OnOnsocketbartender(WPARAM wParam, LPARAM lParam) WPARAM wParam:消息来源 res recv(wParam, cs, 65535, 0);获取这个客户端端口socket通道里面的信息长度为65535存放在cs里面如果获取得到res0即是说明该客户端已经断…...

编程日记 2024/7/28 3:41:41

接口自动化中json.dumps（）跟json.loads()区别详解

接口自动化中对于参数处理经常会用到json.dumps()跟json.loads(),下面主要分享一下自己使用总结 1.主要区别 json.dumps() 用于将字典转换为字符串格式 json.loads()用于将字符串转换为字典格式 import jsondict1 {"name":"amy","gender":woma…...

编程日记 2024/7/28 3:40:40

计算机网络-配置双机三层互联（静态路由方式）

目录交换机工作原理路由器工作原理路由信息表组成部分路由器发决策 ARP工作原理配置双机三层互联（静态路由方式） 交换机工作原理 MAC自学习过程初始状态： 刚启动的交换机的MAC地址表是空的。学习过程： 当交换机收到一个数据帧…...

编程日记 2024/7/28 3:39:39

ES(Elasticsearch)常用的函数有哪些？

【电子书大全】内含上千本顶级编程书籍，是程序员必备的电子书资源包，并且会不断地更新，助你在编程的道路上更上一层楼！ 链接: https://pan.baidu.com/s/1yhPJ9LmS_z5TdgIgxs9NvQ?pwdyyds > 提取码: yyds Elasticsearch&#x…...

编程日记 2024/7/28 3:37:37

【计算机网络】ICMP报文实验

一：实验目的 1：掌握ICMP报文的各种类型及其代码。 2：掌握ICMP报文的格式。 3：深入理解TTL的含义（Time to Live，生存时间）。二：实验仪器设备及软件硬件：RCMS-C服务器…...

编程日记 2024/7/28 3:36:36

transformers进行学习率调整lr_scheduler（warmup）

一、get_scheduler实现warmup 1、warmup基本思想 Warmup（预热）是深度学习训练中的一种技巧，旨在逐步增加学习率以稳定训练过程，特别是在训练的早期阶段。它主要用于防止在训练初期因学习率过大导致的模型参数剧烈波动或不稳定。…...

编程日记 2024/7/28 3:35:35

智能优化算法之灰狼优化算法（GWO）

智能优化算法是一类基于自然界中生物、物理或社会现象的优化技术。这些算法通过模拟自然界中的一些智能行为，如遗传学、蚁群觅食、粒子群体运动等，来解决复杂的优化问题。智能优化算法广泛应用于各种工程和科学领域，因其具有全局搜索能力、鲁…...

编程日记 2024/7/28 3:26:24

昇思25天学习打卡营第17天|计算机视觉

昇思25天学习打卡营第17天文章目录昇思25天学习打卡营第17天ShuffleNet图像分类ShuffleNet网络介绍模型架构Pointwise Group ConvolutionChannel ShuffleShuffleNet模块构建ShuffleNet网络模型训练和评估训练集准备与加载模型训练模型评估模型预测打卡记录 ShuffleNet图像分…...

编程日记 2024/7/28 3:25:23

Windows图形界面(GUI)-MFC-C/C++ - 键鼠操作

公开视频 -> 链接点击跳转公开课程博客首页 -> 链接点击跳转博客主页目录 MFC鼠标派发流程鼠标消息(客户区) 鼠标消息(非客户) 坐标处理客户区非客户坐标转换示例代码 MFC键盘击键消息虚拟键代码键状态 MFC鼠标派发流程消息捕获&#…...

编程日记 2024/7/28 3:24:23

Angular 18.2.0 的新功能增强和创新

一.Angular 增强功能 Angular 是一个以支持开发强大的 Web 应用程序而闻名的平台，最近发布了 18.2.0 版本。此更新带来了许多新功能和改进，进一步增强了其功能和开发人员体验。在本文中，我们将深入探讨 Angular 18.2.0 为开发人员社区提供的…...

编程日记 2024/7/28 3:23:22

matlab 小数取余 rem 和 mod有 bug

目录前言Matlab取余函数1 mod 函数1.1 命令行输入1.2 命令行输出 2 rem 函数2.1 命令行输入2.2 命令行输出分析原因注意前言在 Matlab 代码中mod(0.11, 0.1) < 0.01 判断为真，mod(1.11, 0.1) < 0.01判断为假，导致出现意料外的结果。结果发现…...

编程日记 2024/7/28 3:22:21

Avalonia中的数据模板

文章目录 1. 介绍和概述什么是数据模板：数据模板的用途：2. 定义数据模板在XAML中定义数据模板：在代码中定义数据模板：3. 使用数据模板在控件中使用数据模板：数据模板选择器：定义数据模板选择器：在XAML中使用数据模板选择器：4. 复杂数据模板使用嵌套数据模板：使用模板绑…...

编程日记 2024/7/28 3:21:20

Sqlmap中文使用手册 - Techniques模块参数使用

目录 1. Techniques模块的帮助文档2. 各个参数的介绍2.1 --techniqueTECH2.2 --time-secTIMESEC2.3 --union-colsUCOLS2.4 --union-charUCHAR2.5 --union-fromUFROM2.6 --dns-domainDNS2.7 --second-urlSEC2.8 --second-reqSEC 1. Techniques模块的帮助文档 Techniques:These o…...

编程日记 2024/7/28 3:19:18

科普文：kubernets原理

kubernetes 已经成为容器编排领域的王者，它是基于容器的集群编排引擎，具备扩展集群、滚动升级回滚、弹性伸缩、自动治愈、服务发现等多种特性能力。本文将带着大家快速了解 kubernetes ，了解我们谈论 kubernetes 都是在谈论什么。一、背…...

编程日记 2024/7/28 3:17:16

GO-学习-02-常量

常量是不变的 const package main import "fmt"func main() {//常量定义时必须赋值const pi 3.1415926const e 2.718//一次声明多个常量const(a 1b 2c "ihan")const(n1 100n2n3)//n2,n3也是100 同时声明多个常量时，如果省略了值则表示和…...

编程日记 2024/7/28 3:12:12

Vue系列面试题

大家好，我是有用就扩散，有用就点赞。 1.Vue中组件间有哪些通信方式？ 父子组件通信： （1）props | $emit （接收父组件数据 | 传数据给父组件） （2）ref | $refs&a…...

编程日记 2024/7/28 3:07:05

等级保护总结2

网络安全等级保护解决方案的主打产品： HiSec Insight安全态势感知系统、 FireHunter6000沙箱、 SecoManager安全控制器、 HiSecEngine USG系列防火墙和HiSecEngine AntiDDoS防御系统。华为HiSec Insight安全态势感知系统是基于商用大数据平台FusionInsight的A…...

编程日记 2024/7/28 3:05:00

关于Redis(热点数据缓存,分布式锁,缓存安全(穿透,击穿,雪崩))；

热点数据缓存: 为了把一些经常访问的数据，放入缓存中以减少对数据库的访问频率。从而减少数据库的压力，提高程序的性能。【内存中存储】成为缓存; 缓存适合存放的数据: 查询频率高且修改频率低数据安全性低作为缓存的组件: redis组件 memory组件 e…...

编程日记 2024/7/28 2:59:55

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇嵌入式Linux驱动开发篇-第四十七章字符设备和杂项设备总结回顾

i.MX8MM处理器采用了先进的14LPCFinFET工艺，提供更快的速度和更高的电源效率;四核Cortex-A53，单核Cortex-M4，多达五个内核 ，主频高达1.8GHz，2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…...

编程日记 2024/7/28 2:56:52

C#初级——枚举

枚举枚举是一组命名整型常量。 enum 枚举名字 { 常量1, 常量2, …… 常量n }; 枚举的常量是由 , 分隔的列表。并且，在这个整型常量列表中，通常默认第一位枚举符号的值为0，此后的枚举符号的值都比前一位大1。在将枚举赋值给 int 类型的…...

编程日记 2024/7/28 2:55:51

Linux 动静态库

一、动静态库 1、库的理解库其实是给我们提供方法的实现，如上面的对于printf函数的实现就是在库中实现的，而这个库也就是c标准库，本质也是文件，也有对应的路径 2、区别静态库是指编译链接时，把库文件的代码全部加入…...

编程日记 2024/7/28 2:54:49

微信小游戏之三消(一)

首先设定一下单个方块 cell 类： 类定义和属性 init 方法用于初始化方块，接收游戏实例、数据、宽度、道具类型和位置。 onWarning 方法设置警告精灵的帧，并播放闪烁动作，用于显示方块的警告状态。 grow 方法根据传入的方向…...

编程日记 2024/7/28 2:49:44

软件测试---Linux

Linux命令使用：为了将来工作中与服务器设备进行交互而准备的技能（远程连接/命令的使用）数据库的使用：MySQL，除了查询动作需要重点掌握以外，其他操作了解即可什么是虚拟机通过虚拟化技术，在电脑…...

编程日记 2024/7/28 2:48:44

数据库之数据表基本操作

目录一、创建数据表 1.创建表的语法形式 2.使用SQL语句设置约束条件 1.设置主键约束 2.设置自增约束 3.设置非空约束 4.设置唯一性约束 5.设置无符号约束 6.设置默认约束 7.设置外键约束 8.设置表的存储引擎二、查看表结构 1.查看表基本结构 2.查看建表语句三…...

编程日记 2024/7/28 2:47:42

利用OSMnx求路网最短路径并可视化（二）

书接上回，为了增加多路径的可视化效果和坐标匹配最近点来实现最短路可视化，我们使用图形化工具matplotlib结合OSMnx的绘图功能来展示整个路网图，并特别高亮显示计算出的最短路径。多起终点最短路路径并计算距离和时间完整代码#运行环境 P…...

编程日记 2024/7/28 2:46:42

双向门控循环神经网络（BiGRU）及其Python和MATLAB实现

BiGRU是一种常用的深度学习模型，用于处理序列数据的建模和预测。它是基于GRU（Gated Recurrent Unit）模型的改进版本，通过引入更多的隐藏层和增加网络的宽度，能够更好地捕捉复杂的序列数据中的模式。背景：…...

编程日记 2024/7/28 2:45:40

【BUG】已解决：ERROR: Failed building wheel for jupyter-nbextensions-configurator

ERROR: Failed building wheel for jupyter-nbextensions-configurator 目录 ERROR: Failed building wheel for jupyter-nbextensions-configurator 【常见模块错误】【解决方案】欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页，我…...

编程日记 2024/7/28 2:43:38

Unity UGUI 之自动布局组件

本文仅作学习笔记与交流，不作任何商业用途本文包括但不限于unity官方手册，唐老狮，麦扣教程知识，引用会标记，如有不足还请斧正本文在发布时间选用unity 2022.3.8稳定版本，请注意分别 1.什么是自动布局组件…...

编程日记 2024/7/28 2:40:36

网络基础之(11)优秀学习资料

网络基础之(11)优秀学习资料 Author：Once Day Date: 2024年7月27日漫漫长路，有人对你笑过嘛… 全系列文档可参考专栏：通信网络技术_Once-Day的博客-CSDN博客。参考文档： 网络工程初学者的学习方法及成长之路（红…...

编程日记 2024/7/28 2:37:33

QT自定义无边框窗口（可移动控制和窗口大小调整）

QT是一个功能强大的跨平台开发框架，它提供了丰富的界面设计工具和组件。在界面开发中，QT窗口自带的标题栏无法满足我们的需求。我们就需要自定义无边框窗口，包括自定义标题栏和窗口大小调整功能。本文将介绍如何在QT中实现这些功能。一、简…...

编程日记 2024/7/28 2:36:32

Typora 【最新1.8.6】版本安装下载教程 (轻量级 Markdown 编辑器)，图文步骤详解，免费领取（软件可激活使用）

文章目录软件介绍软件下载安装步骤激活步骤软件介绍 Typora 是一款专为 Markdown 爱好者设计的文本编辑器，它结合了简洁的界面设计与强大的 Markdown 渲染能力，为用户提供了一个流畅、高效的写作环境。以下是对 Typora 更详细的介绍： 核心特…...

编程日记 2024/7/28 2:35:31

RxJava 面试题及其答案

以下是一个全面的 RxJava 面试题及其答案，涵盖了 RxJava 的各个方面，包括基本概念、操作符、线程管理、错误处理、背压处理等： 基本概念 1. RxJava 的基本概念和原理是什么？ 答案： RxJava 是一个用于响应式编程的库…...

编程日记 2024/7/28 2:34:30

【Rust】所有权OwnerShip

什么是所有权 rust使用由编译器检查的一些规则构成的所有权系统来管理内存。且这不会影响程序的运行效率。所有权规则 rust中每一个每一个值都有一个owner。在同一时刻，只能有一个owner。当这个owner超过范围，则该值会被丢弃。 String类型为什么需…...

编程日记 2024/7/28 2:33:28

qt总结--翻金币案例

完成了一个小项目的在qt5.15.2环境下的运行,并使用NSIS editNSIS打包完成.有待改进之处:增加计时功能,随机且能通关功能,过关后选择下一关功能.打包后仅仅有安装包有图标安装后应用图标并未改变在qt .pro中有待改进对qt的基本操作和帮助文档有了基本的认识.对C制作小游戏有了…...

编程日记 2024/7/28 2:32:27