html+css 实现hover中间展开背景
前言：哈喽，大家好，今天给大家分享html+css 绚丽效果！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕
目录
- 一、效果
- 二、原理解析
- 1.这是一个，hover==中间展开背景==的效果。每个按钮都是由3部分组成，button,button:before,文字,如下图。
- 按钮组成简易示例
- 2.当按钮上有鼠标时，hover效果触发，运行==transition过渡动画==效果。
- 3.具体的变换参数，直接==看代码==，可以一键复制，查看效果
- 三、上代码，可以直接复制使用
- 目录
- html
- css
一、效果
二、原理解析
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中间展开背景
前言：哈喽，大家好，今天给大家分享htmlcss 绚丽效果！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 目…...
Java 怎么获取支付宝Open ID
在Java中获取支付宝用户的OpenID，通常是通过支付宝的开放平台API来完成的。OpenID是支付宝用于唯一标识一个支付宝用户的字符串，它在OAuth授权流程中被用来获取用户的身份和权限。 下面我将给出一个基于Java使用Spring Boot框架和支付宝开放平台SDK来获…...
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 |…...
Typora的markdown笔记使用说明
个人感觉Typora是一款很适合记录编程学习的软件 目录 个人感觉Typora是一款很适合记录编程学习的软件 一、标题 二、段落 1、换行 2、分割线 三、文字显示 1、字体 2、上下标 四、列表 1、无序列表 2、有序列表 3、任务列表 五、区块显示 六、代码显示 1、行内…...
前端如何做单元测试? 看这篇就入门了
前言 对于现在的前端工程，一个标准完整的项目，通常情况单元测试是非常必要的。但很多时候我们只是完成了项目而忽略了项目测试。我认为其中一个很大的原因是很多人对单元测试认知不够，因此我写了这边文章，一方面期望通过这篇文章…...
Chainlit快速实现AI对话应用的聊天记录如何持久性保存
前言 Chainlit 可以设置聊天记录用户搜索和浏览过去的对话。 如何实现 要启用聊天历史记录，您需要启用： 数据持久性身份验证恢复对话 为了让用户继续持久对话，请使用cl.on_chat_resume 生命周期钩子 装饰器使用户能够继续对话。需要同时启用数据持久性和身份验证。 该…...
【探索数据结构与算法】——深入了解双向链表（图文详解）
目录 一、双向链表的基本概念 二、双向链表的结构 三、双向链表的基本操作实现方法 1.双向链表的初始化 2.双向链表的头插 3.双向链表的尾插 6.查找节点 7.在指定位置之前插入节点 8.删除指定位置节点 9.打印链表数据 10.双向链表销毁 四、完整代码实现 …...
linux常用命令备忘录
一、常用命令 查看被占用进程：ps ef|grep 11612 查看当前目录：pwd 查看文件的md5： （linux）md5sum 文件名 （windows）certutil -hashfile some_file MD5 查看当前目录的文件大小：…...
【C++进阶学习】第十二弹——C++ 异常处理：深入解析与实践应用
前言： 在C编程语言中，异常处理是一种重要的机制，它允许程序员在运行时捕获和处理错误或异常情况。本文将详细介绍C异常处理的相关知识点，包括异常的定义、抛出与捕获、异常处理的原则、以及在实际编程中的应用。 目录 1. 异常处理…...
《算法竞赛进阶指南》0x23剪枝
剪枝，就是减少搜索树的规模、尽可能排除搜索书中不必要的分支的一种手段。形象地看，就好像剪掉了搜索树的枝条，故被称为“剪枝”。在深度优先搜索中，有以下常见的剪枝方法。 1.优化搜索顺序 在一些搜索问题中，搜索树的…...
同态加密和SEAL库的介绍（三）BFV - Batch Encoder
写在前面： 在上一篇中展示了如何使用 BFV 方案执行一个非常简单的计算。该计算在 plain_modulus 参数下进行，并且仅使用了 BFV 明文多项式中的一个系数。这种方法有两个显著的问题： 实际应用通常使用整数或实数运算，而不是模运算…...
Docker 环境下使用 Traefik v3 和 MinIO 快速搭建私有化对象存储服务
上一篇文章中，我们使用 Traefik 新版本完成了本地服务网关的搭建。接下来，来使用 Traefik 的能力，进行一系列相关的基础设施搭建吧。 本篇文章，聊聊 MinIO 的单独使用，以及结合 Traefik 完成私有化 S3 服务的基础搭建…...
玛雅房产系统源码开发与技术功能解析
引言 随着房地产市场的蓬勃发展，房产管理系统（Real Estate Management System, REMS）作为提升行业效率、优化资源配置的关键工具，其重要性日益凸显。房产系统源码开发不仅涉及复杂的业务逻辑处理，还融合了先进的软件开…...
c++----初识模板
大家好，这篇博客想与大家分享一些我们c中比较好用的知识点。模板。首先咧，我们都知道模板嘛，就是以前人的经验总结出来的知识。方便我们使用。这里的模板也是一样的。当我们学习过后，对于一些在c中的自定义函数，我们在…...
SpringBoot3热部署
引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional> </dependency> 默认就是,无需配置 可以了…...
J. 二进制与、平方和
https://codeforces.com/gym/104095/problem/J 分析操作一 1&00 ,0&10，ai<qmi(2,24),说明每个数最多操作25次 维护区间或和，orsum & x orsum 就不用递归下去了 势能线段树code // Problem: J. 二进制与、平方和 // Contest: Codeforc…...
LVS中NAT模式和DR模式实战讲解
1DR模式 DR：Direct Routing，直接路由，LVS默认模式,应用最广泛,通过为请求报文重新封装一个MAC首部进行 转发，源MAC是DIP所在的接口的MAC，目标MAC是某挑选出的RS的RIP所在接口的MAC地址；源 IP/PORT…...
写给小白程序员的一封信
文章目录 1.编程小白如何成为大神？大学新生的最佳入门攻略2.程序员的练级攻略3.编程语言的选择4.熟悉Linux5.学会git6.知道在哪寻求帮助7.多结交朋友8.参加开源项目9.坚持下去 1.编程小白如何成为大神？大学新生的最佳入门攻略 编程已成为当代大学生的必…...
Leaf分布式ID
文章目录 系统对Id号的要求UUIDsnowflakeLeafLeaf-snowflakeLeaf-segmentMySQL自增主键segment双buffer 系统对Id号的要求 1、业务 1）全局唯一性：不能出现重复的ID号，既然是唯一标识，这是最基本的要求 2）趋势递增&a…...
Starrocks解析json数组
json数据 [{"spec": "70g/支","unit": "支","skuId": "1707823848651276346","amount": 6,"weight": 70,"spuName": "伊利 甄稀 苦咖啡味雪糕 流心冰淇淋 70g/支",&quo…...
云计算——弹性云计算器（ECS）
弹性云服务器：ECS 概述 云计算重构了ICT系统，云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台，包含如下主要概念。 ECS（Elastic Cloud Server）：即弹性云服务器，是云计算…...
Zustand 状态管理库：极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库，特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代，情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现，消费者对内容的“有感”程度，正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
Java 加密常用的各种算法及其选择
在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
VTK如何让部分单位不可见
最近遇到一个需求，需要让一个vtkDataSet中的部分单元不可见，查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行，是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示，主要是最后一个参数，透明度…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums，返回 数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法，且在 O(n) 时间复杂度…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代，加密货币作为一种新兴的金融现象，正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而，加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下，稳定…...
AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机
这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机，因为在使用过程中发现 Airsim 对外部监控相机的描述模糊，而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置，最后在源码示例中找到了，所以感…...
mac 安装homebrew (nvm 及git)
mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用： 方法一：使用 Homebrew 安装 Git（推荐） 步骤如下：打开终端（Terminal.app） 1.安装 Homebrew…...