css实现鼠标悬浮字体流光背景模糊效果

最新推荐文章于 2024-07-15 13:43:00 发布
最新推荐文章于 2024-07-15 13:43:00 发布
阅读量3.2k 收藏 5
点赞数 1
分类专栏： Web 文章标签： css 字体 filter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010064074/article/details/76221708
版权
这篇博客分享了如何仅使用CSS实现鼠标悬浮时字体出现流光背景模糊的特效。作者介绍了`filter: blur(npx);`、`background-clip: text;`和`text-fill-color`等关键CSS属性，以及利用`linear-gradient`创建动态流光效果。通过调整元素的透明度和添加额外元素来实现鼠标悬浮时的显示和边框伸展动画。
摘要由CSDN通过智能技术生成

美丽的天空

原文地址：→看过来

写在前面

有的时候感觉写点小玩意儿挺开心的，还能实践很多的小知识点，所以这次学着写了个有趣的鼠标悬浮模糊效果，只使用了css额。

效果图

看过来

源码地址→传送门

预览地址→传送门

小知识点

filter: blur(npx);

这个过滤器用来将图片模糊，但是兼容性不太好，n代表模糊度，值越大越模糊。

background-clip: text;

background-clip是用于背景图片的裁剪，

最低0.47元/天 解锁文章
爱吃面包的兰兰
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS实现背景模糊/毛玻璃效果
erzhushashade的博客
12-19 3万+
所有代码地址：filter 文末也有代码 方法一 效果 原理 如果只单纯的想实现背景模糊效果，而背景之上没有其他内容，那么就使用filter（滤镜）就足以，其中包括模糊，亮度，灰度，阴影等等：参考 MDN filter 相关内容。如果在其中上面还有文字，也同样会出现模糊。用下面的方法可以解决 方法二 效果 原理 这里就是使用伪元素（before，after），也是我在网上搜到的大多教程的方法，确实是成功了，但是项目编译后该图片的路径确不正确导致无法使用，这里始终没有找到原因。但是小伙伴不失可以试试
CSS3鼠标悬停按钮发光动画特效.zip
07-05
CSS3鼠标悬停按钮发光动画特效是一款鼠标悬停在按钮上的时候显示出光晕效果。
CSS 鼠标 定义形状
小科的奋斗
10-21 213
巧合要用到鼠标样式效果，就顺便整理了下十五种CSS鼠标样式，小例子供大家使用啊。CSS鼠标样式语法如下：任意标签中插入 style="cursor:*"  例子：<span style="cursor:*">文本或其它页面元素</span>  <a href="#" style="cursor:*">文本或其它页面元素</a&amp
css 边框流光效果
最新发布
qq_34811855的博客
07-15 192
【代码】css 边框流光效果。
鼠标悬浮样式
m0_62094741的博客
11-13 1959
cursor 属性规定要显示的光标的类型（形状）。 1、default 默认光标(通常是一个箭头) 2、auto 默认。浏览器设置的光标。 3、crosshair光标呈现为十字线。 4、pointer 光标呈现为指示链接的指针(-只手) 5、move 此光标指示某对象可被移动。 6、e-resize 此光标指示矩形框的边缘可被向右(东)移动。 7、ne-resize此光标指示矩形框的边缘可被向 上及向右移动(北东)。 8、nw-resize此光标指示矩形框的边缘可被向 上及向左移动(北西)。
css 流光字体
ys_dd的博客
08-11 1042
效果图： 代码： 源码： span { font-size: 22px; line-height: 50px; background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96); -webkit-text-fill-color: transparent; -webkit-background-clip: t..
css3实现鼠标悬浮模糊效果
03-07
这个"css3实现鼠标悬浮模糊效果"的项目旨在展示如何通过CSS3来实现文字流光渐变、背景图模糊处理以及按钮边框的动态展开效果。下面将详细介绍这些知识点。 首先，我们来关注文字的流光渐变动画。CSS3中的`...
纯CSS实现鼠标悬浮式二级菜单
12-05 1865
<style> .fmenu { position: relative; } .fmenu .fsubmenu { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background-color: #0b5ed7; width: 200px; .
css按钮、div等元素的流光+边框+滑动+文字覆盖+聚焦效果+水波样式
04-07
2.流光效果：流光背景、流光边框 3.边框效果：双旋转边框、单旋转边框、呼吸效果边框 4.滑动效果：反光滑动、箭头滑动、中央扩展滑动 5.文字覆盖效果：横向文字覆盖、纵向文字覆盖 6.聚集效果：普通聚集、猫耳朵、熊...
CSS3鼠标悬停图片半透明渐变颜色背景遮罩动画特效
06-11
一款非常漂亮的CSS3鼠标悬停图片半透明渐变颜色背景遮罩动画特效，当鼠标滑过图片时，图片上方会覆盖一层渐变颜色的蒙版，移开图片蒙版又会以渐变的方式消失，视觉效果相当好看。
纯css鼠标覆盖阴影文字效果
07-21
鼠标移动到图片上时弹出阴影覆盖层和覆盖层中的文字
CSS设置背景图片模糊内容不模糊的解决方法
09-27
最近做项目遇到这样的需求一个div设置了background: url，现在需要使图片背景模糊，div内的文字清晰显示。具体解决方法大家参考下本
css字体流光
CherryCola_zjl的博客
06-10 477
<p>字体流光</p> @-webkit-keyframes masked-animation { 0% { background-position: 0 0 } to { background-position: -100% 0 } } .com-loading-text { text-align: center; font-weight: 800; font-size: 40px;
css之鼠标悬浮样式
jerry_0_0的博客
07-07 422
css 之鼠标样式 样式内容分解 代码 cursor: default; cursor: auto; cursor: crosshair; cursor: pointer; cursor: move; cursor: e-resize; cursor: ne-resize; cursor: nw-resize; cursor: n-resize; cursor: se-resize; cursor: sw-resize; cursor: s-resize; cursor: w-resize; cursor
CSS鼠标悬浮及其样式
热门推荐
巧克力很苦的小博客
02-06 9万+
hover鼠标悬浮的使用和定义用法 示例 选择鼠标指针浮动在其上的元素，并设置其样式： .box:hover{ background-color: red; } 定义和用法 :hover 选择器用于选择鼠标指针浮动在上面的元素。 提示：hover 选择器可用于所有元素 :link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面...
CSS速记
lilien的博客
09-25 294
CSS速记 CSS检索网站： w3school：https://www.w3school.com.cn/ 菜鸟教程：https://www.runoob.com/ CSS：页面美化和布局控制 1. 概念： Cascading Style Sheets 层叠样式表 * 层叠：多个样式可以作用在同一个html的元素上，同时生效 2. 好处： 1. 功能强大 2. 将内容展示和样式控制分离 * 降低耦合度。解耦 * 让分工协作更容易 * 提高开发效率 3. CSS的使用：CSS与html结合
css 实现文字流光效果
m0_53273062的博客
11-20 809
实现主要利用background 渐变背景以及backgorund-clip:text实现。经过调研发现大多滑块验证码中，有一些文字流光效果，因此在这里简单实现一下。
css实现鼠标悬浮提示
07-15
你可以使用CSS中的伪类选择器`:hover`来实现鼠标悬浮提示。下面是一个简单的例子： HTML： ```html <div class="tooltip">鼠标悬浮我</div> ``` CSS： ```css .tooltip { position: relative; display: inline-block; } .tooltip::after { content: attr(data-tooltip); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding: 5px; background-color: #000; color: #fff; font-size: 14px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover::after { opacity: 1; } ``` 在上述例子中，我们给要添加悬浮提示的元素添加了一个自定义的属性 `data-tooltip`，用于存储提示内容。通过CSS设置伪元素 `::after` 来实现提示框的样式，并通过 `opacity` 属性控制悬浮时的显示与隐藏。当鼠标悬浮在元素上时，使用 `:hover` 伪类选择器来改变 `::after` 的 `opacity` 值，从而显示提示内容。 你可以根据需要自定义提示框的样式和内容。希望对你有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值