鼠标悬浮特效：常见6种背景类悬浮特效

最新推荐文章于 2025-05-03 14:09:17 发布
最新推荐文章于 2025-05-03 14:09:17 发布
阅读量710 收藏 6
点赞数 17
分类专栏： 页面特效与元素动画 文章标签： css css3 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuhen_n/article/details/147658830
版权

鼠标悬浮特效：常见6种背景类悬浮特效

前言

在之前的文章中，我们介绍了常见的鼠标悬浮特效分为元素边框类特效（改变元素边框的展示方式）和元素背景类特效（改变元素背景颜色、阴影等）。在之前的文章中，介绍了 常见6种边框类悬浮特效 。本文将着重介绍日常开发中，常见的6种元素背景类特效。

背景闪现

背景闪现：鼠标悬浮时，元素产生一个新背景，其效果图如下所示：

效果预览

背景闪现

代码展示

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>背景闪现</title>
		<style>
			.hover-border {
				margin: 50px;
				width: 200px;
				height: 100px;
				background-color: #e0e0e0;
				position: relative;
				transition: background-color 0.3s ease;
				/* 文字相关属性 */
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				color: #333;
			}

			.hover-border:hover {
				background-color: #230FEE;
			}
		</style>
	</head>

	<body>
		<div class="hover-border">背景闪现</div>
	</body>

</html>

元素阴影

元素阴影：鼠标悬浮时，元素产生阴影效果，其效果图如下所示：

效果预览

元素阴影

代码展示

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>元素阴影</title>
		<style>
			.hover-border {
				margin: 50px;
				width: 200px;
				height: 100px;
				background-color: #e0e0e0;
				position: relative;
				transition: background-color 0.3s ease;
				/* 文字相关属性 */
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				color: #333;
			}

			.hover-border:hover {
				box-shadow:  5px 5px 10px;
			}
		</style>
	</head>

	<body>
		<div class="hover-border">元素阴影</div>
	</body>

</html>

元素悬浮阴影

元素悬浮阴影：鼠标悬浮时，元素向外扩大，并产生阴影效果，其效果图如下所示：

效果预览

元素悬浮阴影

代码展示

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>元素悬浮阴影</title>
		<style>
			.hover-border {
				margin: 50px;
				width: 200px;
				height: 100px;
				background-color: #e0e0e0;
				position: relative;
				transition: background-color 0.3s ease;
				/* 文字相关属性 */
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				color: #333;
			}

			.hover-border:hover {
				transform: scale(1.1);
				box-shadow:  5px 5px 10px;
			}
		</style>
	</head>

	<body>
		<div class="hover-border">元素悬浮阴影</div>
	</body>

</html>

元素上浮阴影

元素悬浮阴影：鼠标悬浮时，元素会向上浮动，同时在元素下方生成一个缩小的投影，其效果图如下所示：

效果预览

元素上浮阴影

代码展示

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>元素上浮阴影</title>
		<style>
			.hover-border {
				margin: 50px;
				width: 200px;
				height: 100px;
				background-color: #e0e0e0;
				position: relative;
				/* 文字相关属性 */
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				color: #333;
			}

			.hover-border::before {
				content: '';
				position: absolute;
				z-index: -1;
				top: 100%;
				left: 5%;
				height: 10px;
				width: 90%;
				opacity: 0;
				background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
			}

			.hover-border:hover {
				transform: translateY(-10px);
			}

			.hover-border:hover::before {
				opacity: 1;
				transform: translateY(10px);
			}
		</style>
	</head>

	<body>
		<div class="hover-border">元素上浮阴影</div>
	</body>

</html>

元素边框阴影

元素边框阴影：鼠标悬浮时，元素左侧和上侧会产生一个内阴影，看起来元素像是“下沉”到页面中了，其效果图如下所示：

效果预览

元素边框阴影

代码展示

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>元素边框阴影</title>
		<style>
			.hover-border {
				margin: 50px;
				width: 200px;
				height: 100px;
				background-color: #e0e0e0;
				position: relative;
				/* 文字相关属性 */
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				color: #333;
			}

			.hover-border:hover {
				box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2);
			}
		</style>
	</head>

	<body>
		<div class="hover-border">元素边框阴影</div>
	</body>

</html>

元素卷角

元素卷角：鼠标悬浮时，元素的一个角卷起来了，其效果图如下所示：

效果预览

元素卷角

代码展示

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>元素卷角</title>
		<style>
			.hover-border {
				margin: 50px;
				width: 200px;
				height: 100px;
				background-color: #e0e0e0;
				position: relative;
				/* 文字相关属性 */
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				color: #333;
			}

			.hover-border::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 0;
				border-color: rgba(255, 255, 255, 0.8) transparent transparent rgba(255, 255, 255, 0.8);
				box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
				transition: border-width 0.3s ease;
			}

			.hover-border:hover::before {
				border-width: 20px;
			}
		</style>
	</head>

	<body>
		<div class="hover-border">元素卷角</div>
	</body>

</html>

结语

本文主要介绍了6种常见的鼠标悬浮背景类特效，你还知道哪些鼠标悬浮背景类特效？欢迎在评论区留言分享！

CSS特效 鼠标悬浮文字跳动动画效果
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-01 2215
如果想要更复杂的跳动路径，可以通过调整关键帧来实现。
鼠标悬浮特效：常见6种边框类悬浮特效
wuhen_n的博客
05-01 778
本文主要介绍了日常开发中6种常见的鼠标悬浮边框类特效，包括边框展示、边框外浮、边框闪现、元素空心、元素裁剪和边框圆角。
html鼠标悬浮时特效,9款基于CSS3 Transitions实现的鼠标经过图标悬停特效
weixin_28818721的博客
06-04 945
之前给大家分享了很多css3实现的按钮特效。今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效。这款特效适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下：实现的代码。html代码：MobileDesktopPartnersSupportSecuritycss3代码：.hi-icon...
CSS特效008：鼠标悬浮文字跳动动画效果
大剑师兰特的GIS世界
11-14 1240
css实战中，如何制作鼠标悬浮文字跳动呢？实际上很简单，主要用到keyframes状态的不同阶段，利用text-shadow:给出不同的阴影方向和颜色值，然后来个无限大循环，就有了结果。
HTML&CSS：鼠标悬停！酷炫动态背景特效
weixin_52814911的博客
01-20 831
这段代码是一个HTML页面，它包含了CSS样式，用于创建一个具有动态背景效果的卡片。卡片上显示了一些文本和一个输入框，用于用户输入手机号码，还有一个按钮用于重置密码。当鼠标悬停在卡片上时，背景会旋转并放大。
鼠标悬浮移动特效
qq_45902401的博客
11-10 492
鼠标悬浮移动特效 效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ width: 100%; height: 100vh; background: gre
自己动手丰衣足食之鼠标悬浮特效
黄沙百战穿金甲，不破楼兰终不还。
03-13 1188
button特效： <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script> <title>基于jquery hover图片遮罩层滑动 </title>
html鼠标悬停点击,jQuery实现鼠标点击悬浮特效
weixin_32029321的博客
06-03 896
这次给大家带来jQuery实现鼠标点击悬浮特效，jQuery实现鼠标点击悬浮特效的注意事项有哪些，下面就是实战案例，一起来看一下。鼠标点击一下,在鼠标上方显示一个爱心❤,并有慢慢向上消失的效果,如下图：是不是很炫酷,直接贴代码:测试*{margin: 0px;padding: 0px;}$(function(){var height=$(window).width();$('#test').css...
CSS特效002：花样的鼠标悬停效果
大剑师兰特的GIS世界
11-08 2281
css实战中，鼠标的悬停有各种各样的效果，下面的这个示例集中了填充、脉搏抖动，关闭，提升，向上填充，来门，错位等各种花样特效，很炫酷实用。
jQuery鼠标悬浮图片放大特效.zip
07-11
"jQuery鼠标悬浮图片放大特效"是一种常见的交互设计技术，它能够提升用户对网站内容的感知和兴趣。这个特效在用户将鼠标悬停在图片上时，会使得图片局部或者整体放大，为用户提供更清晰的细节视图。这种效果常见于...
jQuery鼠标悬浮图片放大特效
04-07
总结来说，"jQuery鼠标悬浮图片放大特效"是通过jQuery库和CSS3技术实现的一种交互设计，它提高了用户对网页中图片的感知，使得浏览体验更加丰富和有趣。理解和掌握这种特效的实现原理，对于提升网站或应用的用户体验...
jquery+css3实现的6种鼠标悬浮图片特效源码.zip
11-17
在本资源中，"jquery+css3实现的6种鼠标悬浮图片特效源码.zip" 提供了一套基于 jQuery 和 CSS3 的图片特效实现，适用于网页设计和开发。这些特效能够为用户带来丰富的交互体验，提升网站的视觉吸引力。以下是关于...
jQuery鼠标悬浮图片放大特效特效代码
03-20
jQuery鼠标悬浮图片放大特效是一种常见的网页交互设计，用于提升用户体验，特别是展示商品或图像细节时。这个特效在用户将鼠标光标移动到图片上方时，会动态地放大图片，让用户可以更清晰地查看图片的细节部分。下面...
CSS基础_@拉钩教育【笔记】
m0_65273147的博客
04-30 453
划重点：RGB颜色6位16进制，每2位分别控制红/绿/蓝,例如:#00ff00 绿色#ff0000 红色#ff00ff 紫色 #红、蓝都参一点。
jQuery UI CSS 框架 API
csbysj2020
04-29 413
jQuery UI 是一个开源的 JavaScript 库，它基于 jQuery，提供了一套丰富的用户界面组件和交互效果。CSS 框架 API 是 jQuery UI 的核心之一，它允许开发者通过简单的 CSS 样式来定制和美化网页界面。jQuery UI CSS 框架 API 为开发者提供了丰富的样式和交互效果，可以帮助我们创建美观、交互性强的网页界面。通过本文的介绍，相信大家对 jQuery UI CSS 框架 API 有了一定的了解。
CSS布局
yjs20135869的博客
05-03 720
CSS布局技术帮助我们精确控制网页中元素的位置和排列方式。常规文档流：最基础的布局方式。浮动布局：主要用于排版，但需要一些技巧来清除浮动。定位布局：通过position控制元素的精确位置。Flexbox布局：一维布局模型，简单且灵活。Grid布局：二维布局模型，适合复杂的页面结构。多列布局：适用于文本内容的分列显示。通过合理选择不同的布局方式和工具，我们可以创建各种响应式、灵活且美观的网页布局。
CSS 优化与渲染性能调研
最新发布
欢迎来到我的博客，希望你能有所收获！
05-03 748
优化与渲染性能调研
CSS的三大特性：层叠、继承与优先级
m0_74488469的博客
04-29 998
三大特性协同工作，赋予CSS强大的表现力。更精准控制元素样式减少冗余代码量提升样式可维护性快速定位样式冲突问题理解这些底层原理，是写出高质量CSS代码的关键所在。随着CSS新特性的不断演进（如层叠层@layer），这些基础理论依然保持着核心地位。
react-10样式模块化（./index.module.css， ＜div className={welcome.title}＞Welcome＜/div＞）
岂不闻
04-30 450
React样式模块化（./index.module.css， <div className={welcome.title}>Welcome</div>）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值