css实现文字交融展开效果

最新推荐文章于 2025-06-12 09:46:28 发布

原创最新推荐文章于 2025-06-12 09:46:28 发布 · 285 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

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

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>