css之模糊文本的效果

ゞ浴缸里的玫瑰 2023-06-14 04:25 7阅读 0赞

效果如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70][]

鼠标放上去是可以看到模糊之前的文字的

![20191118164606945.jpg][]

老规矩：

代码如下：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=sSelQoVi2L3KofLo1HOobonW"></script>
        <title>文字模糊效果</title>
        <style>
            .blur {
                font-size: 50px;
                color: transparent;
                text-shadow: 12px 5px 18px rgba(0,0,0,0.9);     /*这里的18px可以根据自己的值设置*/
            }
        </style>
    </head>
    <body>
       <div class="blur">
           我是看不清楚的效果哦
       </div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191118164617494.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[20191118164606945.jpg]: https://img-blog.csdnimg.cn/20191118164606945.jpg

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3 文本溶解效果

景颜色为白色的效果 ![在这里插入图片描述][20190829152127996.gif] 背景颜色设为灰时的效果，白色的范围是字体阴影 ![在这里插入图片描...

秒速五厘米/ 2024年04月17日 17:47/ 0 赞/ 73 阅读

相关文本属性之装饰文本(CSS、HTML)

文本属性之装饰文本(CSS、HTML) <!DOCTYPE html> <html lang="en"> <head>

蔚落/ 2023年10月03日 12:34/ 0 赞/ 13 阅读

相关文本属性之文本缩进(CSS、HTML)

文本属性之文本缩进(CSS、HTML) <!DOCTYPE html> <html lang="en"> <head> <meta

阳光穿透心脏的1/2处/ 2023年10月03日 12:33/ 0 赞/ 15 阅读

相关 css之模糊文本的效果

效果如图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZ

ゞ浴缸里的玫瑰/ 2023年06月14日 04:25/ 0 赞/ 8 阅读

相关 css文字阴影----渐渐模糊效果

text-shadow 为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和

我不是女神ヾ/ 2023年02月18日 11:58/ 0 赞/ 232 阅读

相关 CSS新增属性----渐变、文本效果和字体

CSS3渐变（Gradients）通过CSS3渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡 `渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的

秒速五厘米/ 2022年12月04日 07:32/ 0 赞/ 327 阅读

相关 CSS模糊效果、禁止点击、Vue获取点击元素

1.在Vue的点击事件中如何获取当前的点击的元素或是当前click事件绑定的元素。首先vue的点击事件是用 @click = “clickfun()” 属性在h

电玩女神/ 2022年10月01日 06:51/ 0 赞/ 254 阅读

相关 CSS 魔法 | 超强的文本超出提示效果

点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群 > 本文由阅文前端严文彬授权分享 > > 原文链接：https://juejin.cn/pos

灰太狼/ 2022年08月30日 13:48/ 0 赞/ 295 阅读

相关 css3-文本阴影效果、凹凸效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

短命女/ 2022年07月14日 00:43/ 0 赞/ 318 阅读

相关 iOS 模糊效果相关

项目中一直有使用到模糊处理, 例如图片的高斯模糊, 一直使用的代码如下: // 内部方法,核心代码,封装了毛玻璃效果参数:半径,颜色,色彩饱和度 \- (UIIma

桃扇骨/ 2022年05月15日 08:19/ 0 赞/ 227 阅读