使用animate.style给网站添加动画

html元素需要添加类名animate__animated

例如

<div class="animate__animated">秘密武器开发者中心</div>复制

然后选择你需要的触发时机，根据自己的需要写把，下面是一个例子

在你的元素进入视口的时候触发

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const observerOptions = {
      root: null, // 视口
      rootMargin: '0px', // 视口边距
      threshold: 0.1 // 目标进入视口10%时触发
    };

    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // 元素进入视口时添加动画类
          entry.target.classList.add("animate__backInDown");
          // 停止观察该元素
          observer.unobserve(entry.target);
        }
      });
    }, observerOptions);

    // 查找所有需要动画的元素
    const animatedElements = document.querySelectorAll(".animate__animated");

    animatedElements.forEach((element) => {
      observer.observe(element);
    });
  });
</script>
复制