css3文字模糊代码（详解）

最新推荐文章于 2025-04-23 07:33:53 发布

拼搏的小叔

最新推荐文章于 2025-04-23 07:33:53 发布

阅读量5.3k

点赞数

分类专栏： js_基础篇 js_技巧 js_studyShare 文章标签： css3 文字模糊

本文链接：https://blog.youkuaiyun.com/js_admin/article/details/76440013

版权

js_studyShare 同时被 3 个专栏收录

36 篇文章

订阅专栏

js_技巧

20 篇文章

订阅专栏

js_基础篇

17 篇文章

订阅专栏

本文详细介绍了如何使用CSS3实现文字模糊效果，通过示例代码和展示效果，帮助读者掌握这一技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<head>
    <meta charset="UTF-8">
    <title>文字模糊效果</title>
    <style>
    .con {
        width: 510px;
        margin: 0 auto;
        list-style-type: none;
        margin-top: 20px;
    }

    .con li {
        width: 150px;
        height: 150px;
        background: #fff;
        margin: 10px;
        float: left;
        box-shadow: 2px 2px 2px #999;
        -webkit-transition: 0.5s all ease;
    }

    .con .fuzzy {
        -webkit-transform: scale(0.9);
        box-shadow: 0 0 10px 4px white;
        text-shadow: 0 0 10px black;
        opacity: 0.8;
        color: rgba(0, 0, 0, 0);
    }

    .con .amplification {
        -webkit-transform: scale(1.1);
    }

   /*　其中：-webkit-transition:0.5s all ease;是会在0.5秒的时间执行li的所有指定的动画，text-shadow:0 0 10px black;这个是对文字设置黑色的阴影*/
   /*opacity:0.8;这个是整体的透明度color:rgba(0,0,0,0);这个是设置文字的颜色为黑色，然后是指其透明度为全部透明*/
    </style>
</head>

<body>
    <ul class="con">
        <li class="fuzzy">
            <h2>我是box1</h2></li>
        <li>
            <h2>我是box2</h2></li>
        <li>
            <h2>我是box3</h2></li>
    </ul>
</body>

</html>