css实现文字交融展开效果

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>

猜你喜欢

转载自blog.csdn.net/lovecoding1/article/details/130152892
今日推荐