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

发布于 2022-09-13 00:38:06 字数 212 浏览 15 评论 0

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

白首有我共你 2022-09-20 00:38:06

不推荐直接设置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...

回复收藏 0

~没有更多了~

关于作者

定格我的天空

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

遂心如意

5513090242

巷雨优美回忆

junpengz2000

13郎

qq_xU4RDg

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

遂心如意

5513090242

巷雨优美回忆

junpengz2000

13郎

qq_xU4RDg

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。