HTML怎么实现图片在页面加载时的向下滑入-html教程-PHP中文网

图片滑入动画有三种实现方式：一是纯css @keyframes + animation，简洁兼容；二是intersection observer api触发，滚动至视口才执行；三是现代scroll-driven animation，无需js但支持有限。

html怎么实现图片在页面加载时的向下滑入

图片在页面加载时向下滑入，本质是让图片初始处于视口上方（不可见），再通过 CSS 动画或 JavaScript 控制其向下移动并进入可视区域。实现方式轻量、兼容性好，无需第三方库。

用 CSS @keyframes + animation 实现

这是最常用且简洁的方法：定义一个从上往下的位移动画，绑定到图片元素上。

给图片添加类名，例如 <img src="a.jpg" class="slide-in-down">

在 CSS 中定义动画关键帧：

@keyframes slideInDown {
  from {
    transform: translateY(-50px); /* 起始位置：向上偏移50px */
    opacity: 0;
  }
  to {
    transform: translateY(0);      /* 结束位置：回到原始位置 */
    opacity: 1;
  }
}

应用动画样式：

.slide-in-down {
  animation: slideInDown 0.6s ease-out forwards;
}

注意：forwards 确保动画结束后保持最终状态（否则图片会“弹回”）；ease-out 让滑入更自然。

配合 scroll-trigger 实现“滚动到才触发”

如果希望图片只在用户滚动到它附近时才滑入（更节制、更专业），可用 Intersection Observer API：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

HTML 中为图片加标识：<img src="b.jpg" class="trigger-slide">

CSS 保持初始隐藏+过渡：

.trigger-slide {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s, transform 0.5s;
}

JS 监听进入视口：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.1 });
<p>document.querySelectorAll('.trigger-slide').forEach(img => {
observer.observe(img);
});</p>

再加一条 CSS 规则：.trigger-slide.visible { opacity: 1; transform: translateY(0); }

用纯 CSS 的 scroll-driven animation（现代方案）

Chrome 115+、Safari 17.4+ 支持基于滚动进度的动画，可实现“随滚动渐进滑入”效果：

定义动画：

@keyframes slideDownScroll {
  0% { transform: translateY(-40px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

绑定滚动时间轴：

.scroll-slide {
  animation: slideDownScroll 1s linear;
  animation-timeline: view(); /* 滚动触发动画 */
  animation-range: entry 20% exit 40%; /* 进入视口20%时开始，离开前40%结束 */
}