效果图：

从效果中可以看出当鼠标移入 文字会从左向右依次进行放大 分散 最后消失

html：

css：

先分别设置好对应的样式 包括给span添加上过渡动画 

然后我们可以进行hover设置了 当移入h2时 span添加一个模糊 并且方法俩倍 进行透明隐藏

这个时候可以看到 效果以及完成的差不多了 剩下的就是对逐个消失的处理了

预览：

我们去给每一个span标签设置一个延时的时间 通过nth-child依次给它们进行时间的增加 就可以达到我们需要的效果了

 h2 span:nth-child(1) {
        transition-delay: 0.1s;
      }
      h2 span:nth-child(2) {
        transition-delay: 0.2s;
      }
      h2 span:nth-child(3) {
        transition-delay: 0.3s;
      }
      h2 span:nth-child(4) {
        transition-delay: 0.4s;
      }
      h2 span:nth-child(5) {
        transition-delay: 0.5s;
      }
      h2 span:nth-child(6) {
        transition-delay: 0.6s;
      }
      h2 span:nth-child(7) {
        transition-delay: 0.7s;
      }
      h2 span:nth-child(8) {
        transition-delay: 0.8s;
      }
      h2 span:nth-child(9) {
        transition-delay: 0.9s;
      }