循环打字机+波浪文字效果

原创已于 2024-11-26 17:28:42 修改 · 252 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2024-11-26 15:58:44 首次发布

CSS效果专栏收录该内容

3 篇文章

订阅专栏

1.循环打字效果

循环打字视频效果

💖代码部分


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

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

<body>
  <div id="words" style="text-align: center;font-size: 36px;">
  </div>
</body>
<script>
  // 定义要显示的文本
  var text = 'Hello! coder wangxi!'
  var index = 0
  var speed = 100 // 打字速度（每个字符的延迟时间）
  var pauseDuration = 2000 // 暂停时间（重新开始打字之前的延迟时间）

  function typeEffect () {
    // 检查是否已经显示完所有字符
    if (index < text.length) {
      document.getElementById('words').innerHTML += text.charAt(index)
      index++
      setTimeout(typeEffect, speed)
    } else {
      setTimeout(deleteEffect, pauseDuration) // 在删除效果之前暂停一段时间
    }
  }

  function deleteEffect () {
    // 检查是否已经删除完所有字符
    if (index >= 0) {
      var currentText = text.substring(0, index)
      document.getElementById('words').innerHTML = currentText
      index--
      setTimeout(deleteEffect, speed)
    } else {
      // 重新开始打字效果之前暂停一段时间
      setTimeout(typeEffect, pauseDuration)
      index = 0
    }
  }

  // 开始打字效果
  typeEffect()
</script>
</html>

2.文字波浪效果

波浪文字

💖代码部分

<!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>
    #slider {
      width: 250px;
      display: flex;
      gap: 15px;
      font-size: 30px;
    }

    #sliderValue {
      display: flex;
      color: #e51f54;
      font-weight: 700;
    }

    .start {
      opacity: 0;
    }

    .animation {
      animation: fade .3s forwards;
    }


    @keyframes fade {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }

      100% {
        opacity: 1;
        transform: translateY(0px);
      }
    }

    .holder-animation {
      animation: holder 4s;
    }

    @keyframes holder {
      0% {
        opacity: 1;
      }

      95% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }
  </style>
</head>

<body>
  <main>
    <div id="slider" style="margin: 0 auto;">
      <div class="span">This is</div>
      <div class="span" id="sliderValue"></div>
    </div>
  </main>

  <script>
    var sliderCounter = 0
    var sliderContent = [
      "apple",
      "banana",
      "ball",
      "desk",
      "egg"
    ]
    var slider = document.querySelector("#slider")
    var sliderValue = document.querySelector("#sliderValue")

    function slide () {
      //循环遍历
      if (sliderCounter >= sliderContent.length) {
        sliderCounter = 0
      }

      sliderValue.innerHTML = ""
      sliderValue.classList.add("holder-animation")
      //每个字母加特效
      for (i = 0; i < sliderContent[sliderCounter].length; i++) {
        let letterDiv = document.createElement("div")
        letterDiv.innerHTML = sliderContent[sliderCounter][i]

        if (letterDiv.innerHTML == " ") {
          letterDiv.innerHTML = "&nbsp;"
        }
        letterDiv.classList.add("start")
        letterDiv.classList.add("animation")
        letterDiv.style.animationDelay = i / 10 + "s"
        sliderValue.appendChild(letterDiv)
      }

      sliderCounter++
    }

    slide()
    setInterval(slide, 4000);
  </script>
</body>

</html>