如何利用css和简单JavaScript实现文字渐隐动态效果

如何利用css和简单JavaScript实现下图示例的文字渐隐动态效果呢？

这里我们主要是应用css的以下动画属性

animation: blur 1.5s alternate infinite;

以及简单js控制字符逐一循环动画

具体代码如下：

HTML部分

<div class="loading">Loading</div>

CSS部分

@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: black;
}

.loading {
  color: white;
  letter-spacing: 1rem;
  font-size: 1.5rem;
  font-family: Lato, sans-serif;
  text-transform: uppercase;

  span {
    animation: blur 1.5s alternate infinite;
  }
}

@keyframes blur {
  to {
    filter: blur(5px);
  }
}

JavaScript部分

let loading = document.querySelector(".loading");
let letters = loading.textContent.split("");
loading.textContent = "";
letters.forEach((letter, i) => {
  let span = document.createElement("span");
  span.textContent = letter;
  span.style.animationDelay = `${i / 5}s`;
  loading.append(span);
});