当前位置：首页 > 行业动态 > 正文

html中图片渐入

通过CSS动画或transition设置图片opacity渐变实现渐入效果

实现原理

图片渐入效果通常通过CSS动画或JavaScript控制图片元素的透明度（opacity）或缩放（scale）属性，从完全透明/缩小状态逐渐变为正常显示状态。

html中图片渐入 第1张

CSS实现方式

方法 代码示例 说明
纯CSS过渡 css<br>img.fade-in {<br> opacity: 0;<br> transition: opacity 2s ease-in;<br>}<br>img.fade-in.loaded {<br> opacity: 1;<br>} | 通过transition定义透明度过渡，需配合JS添加loaded类触发动画
CSS动画（@keyframes） css<br>@keyframes fadeIn {<br> from { opacity: 0; }<br> to { opacity: 1; }br>}<br>img.animate-fade {<br> animation: fadeIn 3s forwards;<br>} 直接通过动画关键帧控制渐显，无需额外触发
组合缩放与透明度 css<br>img.scale-fade {<br> opacity: 0;<br> transform: scale(0.8);<br> transition: all 2s;<br>}<br>img.scale-fade.show {<br> opacity: 1;<br> transform: scale(1);<br>} 同时实现缩放和透明度变化，增强视觉效果

JavaScript增强控制

场景 代码示例 作用
监听图片加载后触发 js<br>const img = document.querySelector('.lazy-fade');<br>img.onload = () => {<br> img.classList.add('loaded');<br>}; 确保动画在图片完全加载后开始
延迟执行动画 js<br>setTimeout(() => {<br> document.querySelector('.delay-fade').classList.add('show');<br>}, 1000); 适用于需要定时触发的场景（如滚动到视口时）
兼容低版本浏览器 js<br>if (!window.CSS) {<br> // 降级方案：逐帧修改opacity<br> let img = document.querySelector('.fade-in');<br> let opac = 0;<br> const timer = setInterval(() => {<br> opac += 0.05;<br> img.style.opacity = opac;<br> if (opac >= 1) clearInterval(timer);<br> }, 50);<br>} 处理不支持CSS动画的浏览器

完整示例（HTML+CSS+JS）

<div class="gallery">
  <img src="image1.jpg" alt="示例图片" class="fade-in">
</div>
<style>
.fade-in {
  opacity: 0;
  transition: opacity 2s;
}
.gallery img.loaded {
  opacity: 1;
}
</style>
<script>
document.querySelectorAll('.fade-in').forEach(img => {
  img.onload = () => {
    img.classList.add('loaded');
  };
  // 强制触发加载事件（针对缓存图片）
  if (img.complete) {
    img.onload();
  }
});
</script>

常见问题与解答

如何让多张图片依次渐入？
可通过延迟触发动画类实现： 

.fade-in:nth-child(1) { transition-delay: 0s; }
.fade-in:nth-child(2) { transition-delay: 0.5s; }
.fade-in:nth-child(3) { transition-delay: 1s; }

(boxed{})

图片渐入时出现白屏怎么办？
原因可能是图片未加载完成前容器高度为0，解决方案： 

.gallery {
  min-height: 100px; / 根据实际图片尺寸设置 /
}
.fade-in {
  visibility: hidden; / 防止过渡期间显示 /
}
.fade-in.loaded {
  visibility: visible;
}
CSS动画攻击应对措施
0

相关文章