css实现文字交融展开效果

最新推荐文章于 2023-08-09 15:00:19 发布

前端大鹌鹑

最新推荐文章于 2023-08-09 15:00:19 发布

阅读量193

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/lovecoding1/article/details/130152892

版权

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>