当前位置：首页 > JavaScript

js实现图片渐入

2026-03-16 08:07:17JavaScript

使用CSS动画实现图片渐入

通过CSS的@keyframes和opacity属性实现渐入效果，JavaScript仅用于触发动画。示例代码：

js实现图片渐入

<style>
  .fade-in {
    opacity: 0;
    animation: fadeIn 2s ease-in forwards;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const img = document.getElementById('targetImage');
    img.classList.add('fade-in');
  });
</script>

纯JavaScript实现透明度渐变

通过requestAnimationFrame逐帧修改透明度，适合需要精细控制动画的场景：

js实现图片渐入

function fadeIn(element, duration = 1000) {
  let start = null;
  element.style.opacity = 0;

  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = Math.min((timestamp - start) / duration, 1);
    element.style.opacity = progress;
    if (progress < 1) requestAnimationFrame(step);
  }

  requestAnimationFrame(step);
}

// 使用示例
fadeIn(document.getElementById('image'), 1500);

结合CSS Transition实现

通过JavaScript动态添加类名触发CSS过渡效果：

<style>
  .fade-transition {
    transition: opacity 1.5s ease-out;
    opacity: 1;
  }
  .fade-hidden {
    opacity: 0;
  }
</style>

<script>
  function startFade() {
    const img = document.querySelector('.fade-target');
    img.classList.remove('fade-hidden');
    img.classList.add('fade-transition');
  }

  // 页面加载时执行
  window.onload = startFade;
</script>

使用Web Animations API

现代浏览器支持的Web Animations API提供更强大的控制：

const img = document.getElementById('animated-img');
img.animate([
  { opacity: 0 },
  { opacity: 1 }
], {
  duration: 800,
  easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
  fill: 'forwards'
});