鼠标悬停效果，要求：1，鼠标移入元素周围有模糊效果2，移出元素效果消失

时间: 2024-09-19 07:16:15 浏览: 38

css3+伪元素实现鼠标移入时下划线向两边展开的效果

在CSS3中，伪元素是一种非常强大的工具，可以让我们在不增加额外HTML标记的情况下，为元素添加内容或样式。在本示例中，我们将详细探讨如何利用伪元素`:before`和`:after`以及CSS3的过渡（transition）属性，实现鼠标移入时下划线从中间向两边展开的效果。我们需要创建一个基础的HTML结构，包含一个ID为"underline"的div元素，用于展示下划线效果。这个元素被设置了相对定位，以便我们可以相对于它定位伪元素： ```html <div id="underline"></div> ``` 接下来，我们为这个div元素定义样式，包括宽度、高度、背景色和相对定位： ```css #underline { width: 200px; height: 50px; background: #ddd; margin: 20px; position: relative; } ``` 然后，我们使用伪元素`:before`和`:after`来创建下划线。这两个伪元素的初始宽度为0，高度为3px，背景色为蓝色，并通过绝对定位放置在元素底部居中。同时，我们为它们添加了过渡效果，使其在0.8秒内平滑变化： ```css #underline:before, #underline:after { content: ""; width: 0; height: 3px; background: blue; position: absolute; top: 100%; left: 50%; transition: all .8s; } ``` 当鼠标移入元素时，`:before`伪元素的宽度会从0变为50%，`:after`伪元素的宽度也会从0变为50%，这样就实现了下划线从中间向两边展开的效果： ```css #underline:hover:before { left: 0%; width: 50%; } #underline:hover:after { left: 50%; width: 50%; } ``` 然而，这个实现方式使用了两个伪元素，实际上可以优化为仅使用一个伪元素`:after`。我们可以通过将`:after`伪元素的初始位置设为元素宽度的50%，然后在鼠标移入时同时改变其left和width属性，达到同样的效果，这样代码更简洁： ```css #underline:after { content: ""; width: 0; height: 5px; background: blue; position: absolute; top: 100%; left: 50%; transition: all .8s; } #underline:hover:after { left: 0%; width: 100%; } ``` 这就是整个实现过程。通过CSS3的伪元素和过渡效果，我们可以创造出许多动态且富有吸引力的视觉效果，而无需编写复杂的JavaScript或者引入额外的图片资源。这种技术对于构建响应式和交互式的网页设计非常有用，尤其适用于导航菜单、按钮或其他需要强调的文本元素。以下是完整的HTML和CSS代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移入下划线展开</title> <style type="text/css"> #underline{ width: 200px; height: 50px; background: #ddd; margin: 20px; position: relative; } #underline:after{ content: ""; width: 0; height: 5px; background: blue; position: absolute; top: 100%; left: 50%; transition: all .8s; } #underline:hover:after{ left: 0%; width: 100%; } </style> </head> <body> <div id="underline"></div> </body> </html> ``` 这段代码将创建一个简单的示例，当你将鼠标悬停在div元素上时，下划线会从中间向两边展开。这种技术不仅限于下划线，还可以应用于其他类型的动态效果，如阴影扩展、背景色渐变等，只需稍作调整即可。

要实现鼠标悬停时元素周围的模糊效果，通常可以利用CSS中的伪类`:hover`和`filter`属性。下面是一个简单的HTML和CSS示例，展示了如何在鼠标悬停时给元素添加模糊效果，当鼠标离开时效果消失： ```html <!DOCTYPE html> <html lang="zh"> <head> <title>鼠标悬停模糊效果</title> <style> .blur-effect { transition: filter 0.3s ease-in-out; /* 添加过渡效果，让变化平滑 */ filter: blur(0); /* 默认无模糊 */ } .blur-effect:hover { filter: blur(5px); /* 当鼠标悬停时，将模糊度设置为5像素 */ } </style> </head> <body> <div class="blur-effect"> 悬停这里，鼠标下会有模糊效果 </div> </body> </html> ``` 在这个示例中，我们首先定义了一个名为`.blur-effect`的类，设置了默认的滤镜效果为清晰（`filter: blur(0)`）。然后，在`:hover`伪类中，我们将滤镜设置为模糊（`filter: blur(5px)`），当鼠标悬浮在`.blur-effect`元素上时，该元素会变得模糊。请注意，`filter`特性并不适用于所有浏览器，特别是老版本的IE浏览器。如果你需要兼容更广泛的浏览器，可以考虑使用`backface-visibility`和`transform: translateZ(0)`组合，但这会增加一些额外的复杂性。

阅读全文

鼠标悬停效果，要求：1，鼠标移入元素周围有模糊效果2，移出元素效果消失

相关推荐

创意视觉：CSS悬停效果实现元素形状变换

鼠标移入移出事件模块

易语言鼠标移入移出事件

易语言鼠标移入移出窗口消息

TiltJS:将鼠标悬停在任何元素上，并且元素会向内倾斜

鼠标悬停效果

other-hover:将鼠标悬停在其他元素上时切换 DOM 元素上的类

javascript表格隔行变色加鼠标移入移出及点击效果的方法

video.js实现鼠标移入播放鼠标移出暂停

css3模糊效果鼠标悬停css3文字模糊效果

vue实现鼠标移入移出事件代码实例

Axure鼠标悬停效果

jQuery鼠标悬停效果

鼠标移入移出改变CSS样式的小例子

CSS3+jQuery鼠标跟随图片悬停效果，能够判断鼠标移入的方向，遮罩可以按移入的方向出现，也可以从反方向出现，可设定延迟值。

5款CSS3图标鼠标悬停效果，鼠标悬停在图片上查看效果。兼容主流浏览器

css3鼠标悬停文字模糊效果.zip

css3鼠标悬停文字模糊效果特效代码

鼠标悬停下划线效果

最新推荐

鼠标移入移出改变CSS样式的小例子

hover的用法及live的用法介绍(鼠标悬停效果)

Vue实现鼠标经过文字显示悬浮框效果的示例代码

当鼠标移动到图片上时跟随鼠标显示放大的图片效果

jQuery实现列表自动循环滚动鼠标悬停时停止滚动

SSM Java项目：StudentInfo 数据管理与可视化分析

管理建模和仿真的文件

负载均衡技术深入解析：确保高可用性的网络服务策略

怎么解决头文件重复包含

pyedgar：Python库简化EDGAR数据交互与文档下载