如何实现仅模糊效果上移的CSS底部滑入清晰幻灯片动画？

嘿，我完全get到你的需求了——你想要的是模糊效果从下往上逐渐褪去，露出清晰原图，而不是整个图片元素跟着上移，还不想重复用同一张图片，这个需求完全能实现，而且方法很巧妙！

核心思路 #

不用两个<img>标签，咱们用**伪元素+backdrop-filter**来实现：把原图固定在底层，用伪元素覆盖在上面承载模糊滤镜，然后只对伪元素做向上滑出的动画，这样原图全程不动，只有模糊效果在移动，还完全避免了重复加载图片的问题。

完整代码实现 #

HTML结构（极简，只用一个容器+一张图）

<div class="slide">
  <img src="your-image-url.jpg" alt="幻灯片图片">
</div>
<!-- 可选：如果需要点击触发动画，加个按钮 -->
<button class="trigger-btn">显示清晰图</button>

CSS样式（关键是伪元素和动画）

.slide {
  position: relative;
  overflow: hidden; /* 确保伪元素滑出后不显示在容器外 */
  width: 800px;
  height: 450px;
  margin: 20px auto;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 承载模糊效果的伪元素 */
.slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 用backdrop-filter直接对下方的原图应用模糊，无需重复加载图片 */
  backdrop-filter: blur(8px);
  /* 默认状态保持模糊覆盖，点击后触发动画 */
  transition: opacity 0.2s;
}

/* 触发动画的类 */
.slide.blur-fade-out::before {
  animation: blurSlideUp 1.5s forwards;
}

/* 模糊效果向上滑出的动画 */
@keyframes blurSlideUp {
  to {
    transform: translateY(-100%); /* 向上完全移出容器 */
    opacity: 0; /* 逐渐透明，过渡更自然 */
  }
}

/* 按钮样式（可选） */
.trigger-btn {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

JS代码（触发动画，可选）

如果不是页面加载就自动执行动画，而是需要用户交互触发，用这段代码：

document.querySelector('.trigger-btn').addEventListener('click', () => {
  const slide = document.querySelector('.slide');
  // 防止重复触发动画
  if (!slide.classList.contains('blur-fade-out')) {
    slide.classList.add('blur-fade-out');
  }
});

关键细节解释 #

1. backdrop-filter的妙用：这个属性会对元素后方的内容应用滤镜，所以伪元素不需要自己加载图片，直接让它覆盖在原图上，就能让原图看起来是模糊的，完美解决了“不重复使用图片”的需求。
2. 固定原图，只动伪元素：原图始终铺满容器，伪元素从覆盖整个容器的状态，通过动画向上移出并透明，视觉上就是模糊效果在向上褪去，原图完全不动。
3. 兼容性说明：backdrop-filter在现代浏览器（Chrome、Firefox、Safari 10+）都支持，如果需要兼容非常旧的浏览器，可以降级为伪元素加载原图+filter: blur()，但这样会重复加载图片，不过浏览器会自动缓存，影响不大。

自定义调整 #

• 模糊程度：修改backdrop-filter: blur(8px)里的数值，比如blur(12px)会更模糊。
• 动画时长：调整animation: blurSlideUp 1.5s forwards里的1.5s，比如2s会更慢。
• 动画曲线：可以加ease-in-out让过渡更平滑，比如animation: blurSlideUp 1.5s ease-in-out forwards。

内容的提问来源于stack exchange，提问作者replicant129