master

分支 (2)

管理

管理

master

develop

note
/
打字机效果.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    #container {
      /* 添加这行样式=>文字纵向从右往左显示 */
      writing-mode: vertical-rl;
    }

    #container span {
      opacity: 0;
      transition: opacity 0.5s;
    }
  </style>
</head>

<body>
  <div id="container"></div>

  <script>
    const data = ['清明时节闹坤坤，', '路上行人梳中分；', '借问荔枝何处有，', '苏珊遥指蔡徐村。']
    const arr = []
    // 获取dom元素
    const container = document.querySelector('#container')
    // for/of循环遍历数组
    for (const item of data) {
      // 打印每一个item => 数组的每一个元素
      console.log(item)
      // 创建p标签
      const p = document.createElement('p')
      // 遍历item的每一个字
      for (let i = 0; i < item.length; i++) {
        // 创建span
        let span = document.createElement('span')
        // span的内容等于item的每一个字
        span.innerHTML = item[i]
        // 将span插入到p标签中
        p.append(span)
        // 将span也添加到新数组中
        arr.push(span)
      }
      // 将p标签插入到container
      container.append(p)
    }

    // 延时1毫秒等待上方循环渲染完成
    setTimeout(() => {
      // 遍历arr数组的每一个元素
      arr.forEach((item, index) => {
        // 给每一个元素添加过渡延迟属性
        // 让每一个字都比前一个字延时0.2秒的时间
        item.style.transitionDelay = `${index * 0.2}s`
        // 将透明度设置为不透明
        item.style.opacity = 1
      })
    }, 1)

  </script>
</body>

</html>