写CSS的常用套路(attr()生成文本内容)

元素可以有自定义的属性值，它的命名格式通常为data-*attr()用于获取元素的这种自定义属性值，并赋值给其伪元素的content作为其生成的内容利用这个函数，我们可以用伪元素在原先文本的基础上“复制”出另一个文本，如下图所示。

看上去有点乱糟糟的对吧？没事，给它加上overflow: hidden，把多余的文本遮住。通过JS分割文本并应用交错动画，就得到了如下的效果，这也是接下来本文要讲的overflow障眼法。

HTML:

<ul class="float-text-menu">
  <li><a href="#" data-text="Home">Home</a></li>
  <li><a href="#" data-text="Archives">Archives</a></li>
  <li><a href="#" data-text="Tags">Tags</a></li>
  <li><a href="#" data-text="Categories">Categories</a></li>
  <li><a href="#" data-text="About">About</a></li>
</ul>

CSS:

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

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

.float-text-menu {
  display: flex;
  flex-direction: column;
  list-style-type: none;

  li {

    a {
      display: flex;
      padding: 6px;
      color: white;
      font-family: Lato, sans-serif;
      text-decoration: none;
      overflow: hidden;

      span {
        position: relative;
        transition: 0.3s;

        &::before {
          position: absolute;
          content: attr(data-text);
          transform: translateY(130%);
        }
      }

      &:hover {
        span {
          transform: translateY(-130%);
        }
      }
    }
  }
}

JS:

let floatTextMenuLinks = document.querySelectorAll(".float-text-menu li a");
floatTextMenuLinks.forEach(link => {
  let letters = link.textContent.split("");
  link.textContent = "";
  letters.forEach((letter, i) => {
    let span = document.createElement("span");
    span.textContent = letter;
    span.style.transitionDelay = `${i / 20}s`;
    span.dataset.text = letter;
    link.append(span);
  });
});