搜索

首页  >  问答  >  正文

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

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

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

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

P粉347804896P粉347804896325 天前492

全部回复(2)我来回复

  • P粉940538947

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

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

    @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粉541551230

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

    这是一个仅使用 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
  • 取消回复