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

html+css 实现hover中间展开背景

news 2025/12/15 13:40:43

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

目录

  • 一、效果
  • 二、原理解析
    • 1.这是一个，hover==中间展开背景==的效果。每个按钮都是由3部分组成，button,button:before,文字,如下图。
      • 按钮组成简易示例
    • 2.当按钮上有鼠标时，hover效果触发，运行==transition过渡动画==效果。
    • 3.具体的变换参数，直接==看代码==，可以一键复制，查看效果
  • 三、上代码，可以直接复制使用
    • 目录
    • html
    • css

一、效果

html+css 实现hover中间展开背景效果

二、原理解析

1.这是一个，hover中间展开背景的效果。每个按钮都是由3部分组成，button,button:before,文字,如下图。

按钮组成示意图

按钮组成简易示例

按钮组成关系

2.当按钮上有鼠标时，hover效果触发，运行transition过渡动画效果。

/*当hover时*/
.butBgCenterGrow:hover::before {transition: 0.4s all ease;left: 0;right: 0;opacity: 1;z-index: -1;
}.butBgCenterGrow:hover {font-size: large;color: rgb(54, 20, 20);font-weight: 300;cursor: pointer;
}

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

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

目录

目录

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>html+css  实现hover中间展开背景</title><link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container"><h1 style="text-align: center;color:#fff;margin-bottom: 50px;padding-top: 50px; text-shadow: 0 3px 3px #4c6ed3;">html+css 实现hover中间展开背景</h1><div class="wrapper"><button class="butBgCenterGrow">求点赞</button><button class="butBgCenterGrow">求关注</button><button class="butBgCenterGrow">求收藏</button><button class="butBgCenterGrow">求转发</button></div>
</div></body>
</html>

css

* {margin: 0;padding: 0;box-sizing: border-box;
}:root {--btn-bg-color: #fff;--font-color-black: #000;--btn-bg-color-hover: #FF5833;
}.container {min-height: 100vh;background-color: #0e1538;
}.wrapper {display: flex;flex-direction: column;align-items: center;gap: 40px;
}.butBgCenterGrow {width: 150px;height: 50px;color: white;background: transparent;position: relative;transition: ease-out 0.3s;border: 1px solid #43fbf2;border-radius: 3px;font-size: 15px;outline: none;z-index: 1;
}.butBgCenterGrow::before {transition: 0.3s all ease;position: absolute;top: 0;bottom: 0;right: 50%;left: 50%;content: '';background-color: #43fbf2;
}/*当hover时*/
.butBgCenterGrow:hover::before {transition: 0.4s all ease;left: 0;right: 0;opacity: 1;z-index: -1;
}.butBgCenterGrow:hover {font-size: large;color: rgb(54, 20, 20);font-weight: 300;cursor: pointer;
}

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

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

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

相关文章：

html+css 实现hover中间展开背景

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

编程日记 2024/8/9 2:51:24

Java 怎么获取支付宝Open ID

在Java中获取支付宝用户的OpenID&#xff0c;通常是通过支付宝的开放平台API来完成的。OpenID是支付宝用于唯一标识一个支付宝用户的字符串&#xff0c;它在OAuth授权流程中被用来获取用户的身份和权限。 下面我将给出一个基于Java使用Spring Boot框架和支付宝开放平台SDK来获…...

编程日记 2024/8/9 2:50:22

Web-server日志分析命令

https://gist.github.com/hvelarde/ceac345c662429447959625e6feb2b47 通过状态码获取请求总数 awk {print $9} /var/log/apache2/access.log | sort | uniq -c | sort –rn按照IP的请求数量排序 awk {print $1} /var/log/apache2/access.log | sort | uniq -c | sort -rn |…...

编程日记 2024/8/9 2:49:18

Typora的markdown笔记使用说明

个人感觉Typora是一款很适合记录编程学习的软件 目录 个人感觉Typora是一款很适合记录编程学习的软件 一、标题 二、段落 1、换行 2、分割线 三、文字显示 1、字体 2、上下标 四、列表 1、无序列表 2、有序列表 3、任务列表 五、区块显示 六、代码显示 1、行内…...

编程日记 2024/8/9 2:48:17

前端如何做单元测试? 看这篇就入门了

前言 对于现在的前端工程&#xff0c;一个标准完整的项目&#xff0c;通常情况单元测试是非常必要的。但很多时候我们只是完成了项目而忽略了项目测试。我认为其中一个很大的原因是很多人对单元测试认知不够&#xff0c;因此我写了这边文章&#xff0c;一方面期望通过这篇文章…...

编程日记 2024/8/9 2:46:14

Chainlit快速实现AI对话应用的聊天记录如何持久性保存

前言 Chainlit 可以设置聊天记录用户搜索和浏览过去的对话。 如何实现 要启用聊天历史记录，您需要启用： 数据持久性身份验证恢复对话 为了让用户继续持久对话，请使用cl.on_chat_resume 生命周期钩子 装饰器使用户能够继续对话。需要同时启用数据持久性和身份验证。 该…...

编程日记 2024/8/9 2:44:11

【探索数据结构与算法】——深入了解双向链表（图文详解）

目录 一、双向链表的基本概念 ​​​ 二、双向链表的结构 三、双向链表的基本操作实现方法 1.双向链表的初始化 2.双向链表的头插 3.双向链表的尾插 6.查找节点 7.在指定位置之前插入节点 8.删除指定位置节点 9.打印链表数据 10.双向链表销毁 四、完整代码实现 …...

编程日记 2024/8/9 2:42:09

linux常用命令备忘录

一、常用命令 查看被占用进程&#xff1a;ps ef|grep 11612 查看当前目录&#xff1a;pwd 查看文件的md5&#xff1a; &#xff08;linux&#xff09;md5sum 文件名 &#xff08;windows&#xff09;certutil -hashfile some_file MD5 查看当前目录的文件大小&#xff1a…...

编程日记 2024/8/9 2:39:05

【C++进阶学习】第十二弹——C++ 异常处理：深入解析与实践应用

前言&#xff1a; 在C编程语言中&#xff0c;异常处理是一种重要的机制&#xff0c;它允许程序员在运行时捕获和处理错误或异常情况。本文将详细介绍C异常处理的相关知识点&#xff0c;包括异常的定义、抛出与捕获、异常处理的原则、以及在实际编程中的应用。 目录 1. 异常处理…...

编程日记 2024/8/9 2:36:01

《算法竞赛进阶指南》0x23剪枝

剪枝&#xff0c;就是减少搜索树的规模、尽可能排除搜索书中不必要的分支的一种手段。形象地看&#xff0c;就好像剪掉了搜索树的枝条&#xff0c;故被称为“剪枝”。在深度优先搜索中&#xff0c;有以下常见的剪枝方法。 1.优化搜索顺序 在一些搜索问题中&#xff0c;搜索树的…...

编程日记 2024/8/9 2:35:00

同态加密和SEAL库的介绍（三）BFV - Batch Encoder

写在前面&#xff1a; 在上一篇中展示了如何使用 BFV 方案执行一个非常简单的计算。该计算在 plain_modulus 参数下进行&#xff0c;并且仅使用了 BFV 明文多项式中的一个系数。这种方法有两个显著的问题&#xff1a; 实际应用通常使用整数或实数运算&#xff0c;而不是模运算…...

编程日记 2024/8/9 2:32:57

Docker 环境下使用 Traefik v3 和 MinIO 快速搭建私有化对象存储服务

上一篇文章中&#xff0c;我们使用 Traefik 新版本完成了本地服务网关的搭建。接下来&#xff0c;来使用 Traefik 的能力&#xff0c;进行一系列相关的基础设施搭建吧。 本篇文章&#xff0c;聊聊 MinIO 的单独使用&#xff0c;以及结合 Traefik 完成私有化 S3 服务的基础搭建…...

编程日记 2024/8/9 2:30:54

玛雅房产系统源码开发与技术功能解析

引言 随着房地产市场的蓬勃发展&#xff0c;房产管理系统&#xff08;Real Estate Management System, REMS&#xff09;作为提升行业效率、优化资源配置的关键工具&#xff0c;其重要性日益凸显。房产系统源码开发不仅涉及复杂的业务逻辑处理&#xff0c;还融合了先进的软件开…...

编程日记 2024/8/9 2:27:50

c++----初识模板

大家好&#xff0c;这篇博客想与大家分享一些我们c中比较好用的知识点。模板。首先咧&#xff0c;我们都知道模板嘛&#xff0c;就是以前人的经验总结出来的知识。方便我们使用。这里的模板也是一样的。当我们学习过后&#xff0c;对于一些在c中的自定义函数&#xff0c;我们在…...

编程日记 2024/8/9 2:25:46

SpringBoot3热部署

引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional> </dependency> 默认就是,无需配置 可以了…...

编程日记 2024/8/9 2:23:44

J. 二进制与、平方和

https://codeforces.com/gym/104095/problem/J 分析操作一 1&00 ,0&10&#xff0c;ai<qmi(2,24),说明每个数最多操作25次 维护区间或和&#xff0c;orsum & x orsum 就不用递归下去了 势能线段树code // Problem: J. 二进制与、平方和 // Contest: Codeforc…...

编程日记 2024/8/9 2:22:43

LVS中NAT模式和DR模式实战讲解

1DR模式 DR&#xff1a;Direct Routing&#xff0c;直接路由&#xff0c;LVS默认模式,应用最广泛,通过为请求报文重新封装一个MAC首部进行 转发&#xff0c;源MAC是DIP所在的接口的MAC&#xff0c;目标MAC是某挑选出的RS的RIP所在接口的MAC地址&#xff1b;源 IP/PORT&#xf…...

编程日记 2024/8/9 2:20:41

写给小白程序员的一封信

文章目录 1.编程小白如何成为大神&#xff1f;大学新生的最佳入门攻略2.程序员的练级攻略3.编程语言的选择4.熟悉Linux5.学会git6.知道在哪寻求帮助7.多结交朋友8.参加开源项目9.坚持下去 1.编程小白如何成为大神&#xff1f;大学新生的最佳入门攻略 编程已成为当代大学生的必…...

编程日记 2024/8/9 2:19:39

Leaf分布式ID

文章目录 系统对Id号的要求UUIDsnowflakeLeafLeaf-snowflakeLeaf-segmentMySQL自增主键segment双buffer 系统对Id号的要求 1、业务 1&#xff09;全局唯一性&#xff1a;不能出现重复的ID号&#xff0c;既然是唯一标识&#xff0c;这是最基本的要求 2&#xff09;趋势递增&a…...

编程日记 2024/8/9 2:17:36

Starrocks解析json数组

json数据 [{"spec": "70g/支","unit": "支","skuId": "1707823848651276346","amount": 6,"weight": 70,"spuName": "伊利 甄稀 苦咖啡味雪糕 流心冰淇淋 70g/支",&quo…...

编程日记 2024/8/9 2:16:35

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2025/12/15 5:20:25

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2025/12/9 21:16:21

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/10/1 22:26:06

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2025/12/12 12:29:46

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2025/12/15 2:27:36

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/10/2 17:12:14

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2025/12/11 4:48:49

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

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

编程新知 2025/12/12 12:58:45

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

编程新知 2025/12/1 2:54:46