关于网页背景图片设置动画问题

  • Z时代
  • 2024-03-02
  • 分类：IT

关于网页背景图片设置动画问题

这里有个需求：打开网页的时候背景图片有个3s的模糊变清晰的动画过程。
我背景图片是body{background-image}设置的，给body加了动画以后发现无法对背景图片生效（但对body内的其它元素都生效了）
那有没有办法直接对body{background-image}设置动画呢？如果不行的话那就得设个<image>标签来作为背景图片，那用这个方法的话如何能让背景图片固定呢？

回答：

不推荐直接设置body的background-image来实现，这样没法实现细粒度的控制。可以创建一个div放到body下面，设置fixed定位，然后使用filter: blur(xpx)来实现模糊效果，使用transation实现动画。

<body>
  <div class="background" style="background-image: url(https://activity-static.segmentfault.com/222/697/2226970749-60ed580f285d4_big);"></div>
</body>
.background {
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  position: fixed;
  background-size: cover;
  filter: blur(24px);
  transition: filter 3s;
}
body.loaded .background {
  filter: none;
}
window.addEventListener('DOMContentLoaded', () => {
  document.body.classList.add('loaded');
});

https://codepen.io/hungtcs-th...

以上是 关于网页背景图片设置动画问题 的全部内容， 来源链接： utcz.com/p/935724.html

回到顶部