过渡动画css3 效果+实现思路 -3

效果图

项目demo链接

实习思路

<button onclick="start()">again</button>
<p class="landIn">Ano hi watashitachi mada shiranai no Fushigi no monogatari desu.</p>

<style>
  body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8)),
      url(https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg);
    background-size: cover;
  }

  p {
    margin: 0 9em;
    font-size: 2em;
    font-weight: 600;
  }

  .landIn {
    display: flex;
    flex-wrap: wrap;
    line-height: 1.8;
    color: white;
    font-family: Lora, serif;
    white-space: pre;
  }

  .landIn span {
    animation: landIn 0.8s ease-out both;
  }

/** 这里是重点过渡动画，从Y轴向下过渡 效果是会从上往下过渡显示 */
  @keyframes landIn {
    from {
      opacity: 0;
      transform: translateY(-20%);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>

<script>
  function start() {
    /** 找到节点 */
    const dom = document.getElementsByClassName('landIn')[0];
    if (dom) {
      /** 获取内容字符串 */
      let letters = dom.textContent.split('');
      /** 清空内容 */
      dom.textContent = '';
      letters.forEach((letter, i) => {
        /** 每个字母创建一个 span 便签 插入 到 dom里面 */
        let span = document.createElement('span');
        span.textContent = letter;
        span.style.animationDelay = `${i * 0.05}s`;
        dom.append(span);
      });
    }
  }

  start();
</script>