将动画添加到 body 标记中的背景图像属性：分步指南-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

将动画添加到 body 标记中的背景图像属性：分步指南

P粉347804896 2024-03-29 21:59:19

[CSS3讨论组]

547

我在样式标签中使用背景图像。

<style>
body {
 background-image: url("img.jpg");
 background-size: cover;
 transition: background-image 4s linear;
 }
</style>

我希望图像淡入，而无需在页面上添加单独的 div。可以实现这个目标吗？

P粉347804896

全部回复(2)

P粉9405389472024-03-30 19:07:40 2楼

是的，这是可能的。您可以这样做。

@keyframes mymove {
     from {
      /* background: white; */     
     }
     to {
      background: url("https://www.shutterstock.com/image-photo/welded-metal-chain-various-rigging-260nw-2238426561.jpg");
       }
}
body {        
        animation: mymove 2s infinite;
      }

赞 +0

添加回复

P粉5415512302024-03-30 13:40:37 1楼

这是一个仅使用 CSS 的方法。但是，有一个警告，CSS 无法等待事件，因此它无法知道整个网站何时加载。

相反，在此代码段中，它会等待 1 秒，然后开始引入位于主体的 before 伪元素上的背景图像。

body {
  width: 100vw;
  height: 100vh;
  /*just for demo */
  position: relative;
}

body::before {
  background-image: url(https://picsum.photos/id/1015/1024/768);
  background-size: cover;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  animation: fadein 5s 1 1s linear forwards;
}

@keyframes fadein {
  to {
    opacity: 1;
  }
}

Hello, this is some text in the body. It will be seen even before the background starts to fade in.

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>