当前位置：首页 > JavaScript

js实现开屏动画

2026-02-02 18:52:55JavaScript

使用CSS和JavaScript实现开屏动画

通过CSS定义动画效果，JavaScript控制动画的触发和结束时机。

<!DOCTYPE html>
<html>
<head>
  <style>
    .splash-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #3498db;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      animation: fadeOut 1s ease-in-out 2s forwards;
    }

    .splash-content {
      text-align: center;
      color: white;
    }

    @keyframes fadeOut {
      to {
        opacity: 0;
        visibility: hidden;
      }
    }

    .logo {
      width: 100px;
      height: 100px;
      animation: bounce 1s infinite alternate;
    }

    @keyframes bounce {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(-20px);
      }
    }
  </style>
</head>
<body>
  <div class="splash-screen" id="splashScreen">
    <div class="splash-content">
      <img src="logo.png" class="logo" alt="Logo">
      <h1>欢迎使用</h1>
    </div>
  </div>

  <script>
    window.addEventListener('load', function() {
      setTimeout(function() {
        document.getElementById('splashScreen').style.display = 'none';
      }, 3000);
    });
  </script>
</body>
</html>

使用Canvas实现更复杂的开屏动画

Canvas适合实现粒子效果、路径动画等复杂视觉效果。

js实现开屏动画

<canvas id="splashCanvas"></canvas>

<script>
  const canvas = document.getElementById('splashCanvas');
  const ctx = canvas.getContext('2d');

  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  // 粒子系统
  const particles = [];
  for (let i = 0; i < 100; i++) {
    particles.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      size: Math.random() * 5 + 1,
      speedX: Math.random() * 3 - 1.5,
      speedY: Math.random() * 3 - 1.5
    });
  }

  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 更新和绘制粒子
    particles.forEach(particle => {
      particle.x += particle.speedX;
      particle.y += particle.speedY;

      // 边界检查
      if (particle.x < 0 || particle.x > canvas.width) {
        particle.speedX = -particle.speedX;
      }
      if (particle.y < 0 || particle.y > canvas.height) {
        particle.speedY = -particle.speedY;
      }

      ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
      ctx.beginPath();
      ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
      ctx.fill();
    });

    requestAnimationFrame(animate);
  }

  animate();

  // 3秒后移除开屏
  setTimeout(() => {
    canvas.style.display = 'none';
  }, 3000);
</script>

使用GSAP实现高级动画效果

GSAP是一个强大的动画库，适合创建复杂的时序动画。

js实现开屏动画

<div class="splash-container">
  <div class="logo"></div>
  <div class="loading-bar"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script>
  gsap.to(".logo", {
    duration: 1,
    scale: 1.2,
    rotation: 360,
    ease: "elastic.out(1, 0.3)",
    repeat: 1,
    yoyo: true
  });

  gsap.from(".loading-bar", {
    duration: 2,
    width: 0,
    ease: "power2.inOut"
  });

  gsap.to(".splash-container", {
    delay: 2.5,
    duration: 0.5,
    opacity: 0,
    onComplete: () => {
      document.querySelector(".splash-container").style.display = "none";
    }
  });
</script>

响应式开屏动画实现

确保开屏动画在不同设备上都能正常显示。

function adjustSplashScreen() {
  const splash = document.getElementById('splashScreen');
  const width = window.innerWidth;

  if (width < 768) {
    splash.style.fontSize = '16px';
    // 移动端特定调整
  } else {
    splash.style.fontSize = '24px';
    // 桌面端特定调整
  }
}

window.addEventListener('resize', adjustSplashScreen);
window.addEventListener('load', adjustSplashScreen);

带进度条的开屏动画

显示加载进度可以提升用户体验。

let progress = 0;
const progressBar = document.getElementById('progressBar');
const interval = setInterval(() => {
  progress += 10;
  progressBar.style.width = `${progress}%`;

  if (progress >= 100) {
    clearInterval(interval);
    document.getElementById('splashScreen').style.opacity = '0';
    setTimeout(() => {
      document.getElementById('splashScreen').style.display = 'none';
    }, 500);
  }
}, 300);

这些实现方法可以根据具体需求进行组合和调整，创建出符合项目风格的开屏动画效果。