css 实现文字交融展开动画

css 实现文字交融展开动画

效果   👇👇👇👇👇

 

 

 

 

 

<div class="textCont">
     <span class="text">这是一条测试文案</span>
</div>


css:

.textCont{
    filter: contrast(30);
    background: #000;
    .text{
        margin: .5rem auto;
        text-align: center;
        color: #fff;
        width: 100%;
        display: inline-block;
        font-size: .2rem;
        animation: showUp 2s forwards;
    }
    @keyframes showUp{
      from{
        letter-spacing: -50px;
        filter: blur(10px);

      }
      to{
        letter-spacing: 10px;
        filter: blur(0px);
      }
      
    }
}