css 交融效果

实现下面的文字交融效果

原理

1. letter-spacing
2. filter

letter-spacing: 规定字符间有没有额外的空间  

filter: 模糊和改变元素的颜色强度  
        blur：模糊的程度  
        contrast： 调整输入图像的对比度  

  // html 部分
  <div class="container">
    <span class="text">
      Hello World!
    </span>
  </div>

// css 部分
 body {
  margin: 0;
  padding: 0;
  background-color: black;
}
.container {
  margin-top: 50px;
  text-align: center;
  background-color: #000;
  /* 和下面的filter: blur 做一个对比，值越大，2级分化，要么红，要么黑 */
  filter: contrast(30);
}
.text {
  font-size: 100px;
  color: #d13030;
  animation: showUp 3s forwards;
}

@keyframes showUp {
  from {
    /* 规定字符间有没有额外的空间 */
    letter-spacing: -50px;
    /* 模糊度 */
    filter: blur(10px);
  }

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