css3文字模糊代码（详解）

最新推荐文章于 2024-07-10 17:35:01 发布

拼搏的小叔

最新推荐文章于 2024-07-10 17:35:01 发布

阅读量5.2k

点赞数

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

本文链接：https://blog.csdn.net/js_admin/article/details/76440013

版权

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

摘要由CSDN通过智能技术生成

<!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);这个是设置文字的颜色为黑色，然