css实现文字交融展开效果

最新推荐文章于 2024-07-27 19:24:16 发布

前端大鹌鹑

最新推荐文章于 2024-07-27 19:24:16 发布

阅读量259

点赞数 1

文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/lovecoding1/article/details/130152892

版权

该文章展示了如何通过CSSFilter属性来改变网页元素的视觉效果，具体包括利用`contrast()`调整对比度和`blur()`控制模糊度。文中通过一个实例，对文字进行从模糊到清晰的动画效果展示，以增强视觉体验。

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

1. 实现效果：

2.实现代码：

利用css filter: contrast() 修改对比度；

利用css filter: blur() 控制模糊度

style>
    *{
        margin: 0;
        padding: 0;
    }
    .context{
        background-color: black;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        filter: contrast(30);
    }
    .text{
        font-size: 80px;
        color: #fff;;
        animation: showup 3s forwards;
    }
    @keyframes showup {
        from{
            letter-spacing: -63px;
            filter: blur(10px);
        }
        to{
            letter-spacing: 3px;
            filter: blur(1px);
        }
    }
</style>
<body>
    <div class="context">
        <span class="text">知识就在得到 !</span>
    </div>
</body>