鼠标悬浮特效：常见6种边框类悬浮特效

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

鼠标悬浮特效：常见6种边框类悬浮特效

前言

在之前的文章中，我们介绍了 CSS元素动画篇：基于当前位置的变换动画 ，在代码实现中，我们也使用了很多鼠标悬浮事件来触发特效，这些特效都可以用于鼠标悬浮特效。除此之外，常见的鼠标悬浮特效还有元素边框类特效（改变元素边框的展示方式）和元素背景类特效（改变元素背景颜色、阴影等）。本文将着重介绍日常开发中，常见的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 {
			width: 200px;
			height: 100px;
			background-color: #e0e0e0;
			border: 5px solid transparent;
			/* 文字相关属性 */
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 20px;
			color: #333;
		}

		.hover-border:hover {
			animation: reveal-border 0.3s ease forwards;
		}

		@keyframes reveal-border {
			from {
				border-color: transparent;
			}
			to {
				border-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;
				/* 文字相关属性 */
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				color: #333;
			}
			
			.hover-border::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				border: 5px solid #e0e0e0;
				opacity: 0;
				transition: all 0.3s ease;
			}

			.hover-border:hover::before {
				opacity: 1;
				top: -10px;
				left: -10px;
				right: -10px;
				bottom: -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;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				border: 5px solid #e0e0e0;
				opacity: 0;
				transition: all 0.3s ease;
			}

			.hover-border:hover::before {
				animation: flink 1s ease-in-out 1;
			}
			
			@keyframes flink {
			  0% {
					opacity: 0;
			  }
			  50% {
			    opacity: 0.5;
			    top: -8px;
			    left: -8px;
			    right: -8px;
			    bottom: -8px;
			  }
				100% {
				  opacity: 0;
				  top: -15px;
				  left: -15px;
				  right: -15px;
				  bottom: -15px;
				}
			}
		</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; 
				border: 5px solid #e0e0e0;
				background-color: transparent;
				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;
				right: 0;
				bottom: 0;
				background-color: #e0e0e0;
				z-index: -1;
				transform: scale(1);
				transform-origin: center;
				transition: transform 0.3s ease;
			}
			
			.hover-border:hover::before {
				transform: scale(0);
			}
			
		</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; 
				border: 5px solid #e0e0e0;
				background-color: transparent;
				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;
				right: 0;
				bottom: 0;
				background-color: #e0e0e0;
				z-index: -1;
				transform-origin: center;
				transition: all 0.3s ease;
			}
			
			.hover-border:hover::before {
				top: 5px;
				left: 5px;
				right: 5px;
				bottom: 5px;
			}
			
		</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;
				transition: border-radius 0.5s ease;
				/* 文字相关属性 */
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				color: #333;
			}
			
			.hover-border:hover {
				border-radius: 20px;
			}
			
		</style>
	</head>

	<body>
		<div class="hover-border">边框圆角</div>
	</body>

</html>

结语

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

HTML当鼠标滑动边框出现,“鼠标移入显示悬浮框”特效【转】
weixin_35644506的博客
06-04 3350
1、效果说明在效果当中，当用户将鼠标移入一个块时，会从鼠标的移入方向滑入一个悬浮块，悬浮块会随着鼠标移出当前块，且滑出方向遵循鼠标的移出方向2、实现原理分析1、结构分析由于悬浮层有可能从上下左右四个方向滑入目标块，因此需要先针对结构进行处理。在此，可以通过两种方法实现“悬浮层”。一种方法是为每个块定位四个悬浮块(上下左右)，当满足鼠标移入的条件时，让相应的悬浮块滑入；第二种方法是只为每个块定位一个...
css3鼠标悬停动画线条边框特效
Mini_小仙女的博客
12-06 1373
鼠标滑过边框动画效果，使用css3结合jquery。 先上效果图： 代码如下： // html <div class="hotflagson"> <img src="images/14477454559904.png" alt="Swarovski施华洛世奇"> <div class="hotmiddle"> <a href="#"&...
鼠标悬浮特效：常见6种背景类悬浮特效
wuhen_n的博客
05-03 707
本文主要介绍了日常开发中6种常见的鼠标悬浮背景类特效，包括背景闪现、元素阴影、元素悬浮阴影、元素上浮阴影、元素边框阴影和元素卷角。
鼠标悬浮 边框动态出来特效
chichaojing6253的博客
08-01 160
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> ...
十大html鼠标特效,10种炫酷鼠标hover按钮CSS3动画特效
weixin_36018773的博客
06-04 1848
这是一款炫酷的鼠标hover按钮CSS3动画特效。该按钮CSS3动画特效包括10种鼠标hover效果。按钮动画的制作通过CSS3 transition和keyframes帧动画完成。使用方法在页面中引入style.css文件。HTML结构每一种按钮动画都有它们各自的HTML结构，第一种鼠标hover按钮线条动画中，按钮的HTML结构如下：ButtonCSS样式按钮的通用样式如下：button{wi...
常见CSS鼠标悬浮动画-hover属性
小多的博客
09-19 3401
鼠标移入盒子,盒子向上移动并出现底部阴影。鼠标移入盒子放大并出现底部阴影。鼠标移入盒子,盒子右下角卷起。
html盒子边框鼠标悬停效果,CSS3实现鼠标悬停时边框旋转特效
weixin_35728286的博客
06-03 597
这次给大家带来CSS3实现鼠标悬停时边框旋转特效，CSS3实现鼠标悬停时边框旋转特效的注意事项有哪些，下面就是实战案例，一起来看一下。纯CSS3实现的鼠标悬停时边框旋转的效果：实现代码如下，代码中注释已经比较详细，就不再多说了：Documentbody {width: 40rem;height: 30rem;font-size: 62.50%; /* 把body的字体设置为10px以方便使用r...
HTML&CSS：鼠标悬停！酷炫动态背景特效
weixin_52814911的博客
01-20 831
这段代码是一个HTML页面，它包含了CSS样式，用于创建一个具有动态背景效果的卡片。卡片上显示了一些文本和一个输入框，用于用户输入手机号码，还有一个按钮用于重置密码。当鼠标悬停在卡片上时，背景会旋转并放大。
javascript特效鼠标飘过弹出悬浮块
落叶翩翩的CSDN博客
11-15 1689
javascript特效鼠标飘过弹出悬浮块 var float_frame,icon; $(document).ready(function(){ float_frame=$("#float_frame").clone(false); icon=$("#icon"); float_frame.show(); //鼠标悬浮时
css3实现的七款超酷鼠标悬浮特效源码.zip
11-02
综上所述，这个压缩包中的源码可能涉及上述一种或多种CSS3技术的综合运用，通过不同的组合和创新，实现七种不同的鼠标悬浮特效。对于前端开发者来说，学习并实践这些源码不仅可以提升技能，还能激发创新灵感，为自己...
HTML5 Canvas泡泡悬浮鼠标特效特效代码
03-20
这个“HTML5 Canvas泡泡悬浮鼠标特效特效代码”是一个利用Canvas API实现的创新互动效果，用户鼠标滑过时，网页上会出现仿佛在水面上漂浮的泡泡动画。 Canvas API提供了丰富的绘图命令，如`fillRect()`用于画矩形，...
css3鼠标悬浮放大效果 css3鼠标悬浮放大效果网页特效.zip
11-17
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是鼠标悬浮放大效果。这个效果通常用于图片、按钮或其他元素，当用户将鼠标光标悬停在这些元素上时，元素会放大显示，...
CSS基础_@拉钩教育【笔记】
m0_65273147的博客
04-30 450
划重点：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 优化与渲染性能调研
最新发布
欢迎来到我的博客，希望你能有所收获！
05-03 740
优化与渲染性能调研
CSS布局
yjs20135869的博客
05-03 713
CSS布局技术帮助我们精确控制网页中元素的位置和排列方式。常规文档流：最基础的布局方式。浮动布局：主要用于排版，但需要一些技巧来清除浮动。定位布局：通过position控制元素的精确位置。Flexbox布局：一维布局模型，简单且灵活。Grid布局：二维布局模型，适合复杂的页面结构。多列布局：适用于文本内容的分列显示。通过合理选择不同的布局方式和工具，我们可以创建各种响应式、灵活且美观的网页布局。
CSS的三大特性：层叠、继承与优先级
m0_74488469的博客
04-29 995
三大特性协同工作，赋予CSS强大的表现力。更精准控制元素样式减少冗余代码量提升样式可维护性快速定位样式冲突问题理解这些底层原理，是写出高质量CSS代码的关键所在。随着CSS新特性的不断演进（如层叠层@layer），这些基础理论依然保持着核心地位。
react-10样式模块化（./index.module.css， ＜div className={welcome.title}＞Welcome＜/div＞）
岂不闻
04-30 446
React样式模块化（./index.module.css， <div className={welcome.title}>Welcome</div>）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值