Question

我已经将每个元素的分辨率设置为最大1920x1080，但是我仍然无法将png的浮动动画放在以jpg为背景的div类“ container4”上。它们仍然以巨大的页面分辨率浮动。希望您能与我们了解和讨论问题

我想像动画面具一样使用div。

我使用Atom。这是我的动画代码的样子：

.body{
  background-image: url("https://i.ibb.co/3hvJmhk/images.jpg") no-repeat;
}

.container4{

  background-image: url("https://i.ibb.co/3hvJmhk/images.jpg") ;}

div.container4 {
    height: 60em;
    width: 1980px;
    align-items: center;
    align-self: center;
    text-align: center;
    position: absolute;
    bottom: 20px;
    left: 50%;
  }



.wave-one {
  width: 1024px;
  height: 819px;
  background: url("https://i.ibb.co/rQw4qHL/2.png");
  background-repeat: repeat-y;
  float: left;
  position: relative;
  left: 10%;
  bottom: 20px;
  margin-left: -50px;
  z-index: 7;
  overflow: hidden;
}

.wave-two {
  width: 1024px;
  height: 819px;
 background: url("https://i.ibb.co/tCkBV47/3.png") no-repeat;
  float: left;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  z-index: 5;
  overflow: hidden;
}

.wave-three {
  width:1920px;
  height:1000px;
 background:url("https://i.ibb.co/9wZGQmP/1.png") no-repeat;
  position: absolute;
  float: right;
  z-index:6;
  left: 0;
  z-index: 6;
  overflow: hidden;
}

.wave-threeb {
  position:absolute;
  top: 0;
  left: 0;
  z-index: 2;
  float: left;
  overflow: hidden;
  background: url("https://i.ibb.co/3hvJmhk/images.jpg") no-repeat;
}

/*
==============================================
floating
==============================================
*/

.floating{
    animation-name: floating;
    -webkit-animation-name: floating;

    animation-duration: 10s;
    -webkit-animation-duration: 10s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
    0% {
        transform: translateX(0%);
    }
    20% {
         transform: translateX(60%);
    }
  	80% {
    		transform:translateX(20%)
    }
    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes floating {
    0% {
        -webkit-transform: translateX(0%);
    }
    50% {
         transform: translateX(100%);
    }
  	80% {
      	transform: translateX(150%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}

/* Second Version*/
.floating2{
    animation-name: floating;
    -webkit-animation-name: floating;

    animation-duration: 12s;
    -webkit-animation-duration: 12s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes floating2 {
    0% {
        transform: translateX(0%);
    }
    10% {
         transform: translateX(10%);
    }
  	80% {
    		transform:translateX(40%)
    }
    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes floating2 {
    0% {
        -webkit-transform: translateX(0%);
    }
    20% {
         transform: translateX(80%);
    }
  	80% {
      	transform: translateX(40%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}

/* Third Version*/
.floating3{
    animation-name: floating;
    -webkit-animation-name: floating;

    animation-duration: 8s;
    -webkit-animation-duration: 8s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes floating3 {
    0% {
        transform: translateX(0%);
    }
    40% {
         transform: translateX(50%);
    }
  	80% {
    		transform:translateX(100%)
    }
    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes floating3 {
    0% {
        -webkit-transform: translateX(0%);
    }
    40% {
         transform: translateX(50%);
    }
  	80% {
      	transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}

/* Fourth Version*/
.floating4{
    animation-name: floating;
    -webkit-animation-name: floating;

    animation-duration: 25s;
    -webkit-animation-duration: 25s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes floating4 {
    0% {
        transform: translateX(0%);
    }
    50% {
    		transform:translateX(60%)
    }
    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes floating4 {
    0% {
        -webkit-transform: translateX(0%);
    }
    50% {
         transform: translateX(10%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}


.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: black;
   color: #ffffff;
   text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

   <!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="utf-8">
       <title>TTA1€</title>
       <script type="text/javascript" src="index\js\jquery.js"></script>
       <script type="text/javascript" src="index.js"></script>
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
       <link rel="stylesheet" href="gallery.css">

     </head>
     <body>

       <header>

       </header>

       <div class="container4">


         <div class="wave-one floating">
         </div>

         <div class="wave-two floating3">
         </div>

         <div class="wave-three floating4">
         </div>

         <div class="wave-threeb floating2">
         </div>
        

      </div>


       <div class="footer">
         <p>€</p>
       </div>

       <script>

       </script>
     </body>
   </html>

请在整页中打开代码段。

Answer 1

我对所有波浪设置了相同的宽度和高度，并对所有波浪使用了相同的浮动CSS

这是什么变化

 .wave-one {
        width: 1920px;
        height: 1000px;
        background: url('https://i.ibb.co/rQw4qHL/2.png') no-repeat;
        background-repeat: repeat-y;
        float: left;
        position: relative;
        z-index: 7;
        overflow: hidden;
      }

      .wave-two {
        width: 1920px;
        height: 1000px;
        background: url('https://i.ibb.co/tCkBV47/3.png') no-repeat;
        float: left;
        position: absolute;
        z-index: 5;
        overflow: hidden;
      }

      .wave-three {
        width: 1920px;
        height: 1000px;
        background: url('https://i.ibb.co/9wZGQmP/1.png') no-repeat;
        position: absolute;
        float: right;
        z-index: 6;
        left: 0;
        z-index: 6;
        overflow: hidden;
      }

    <div class="wave-one floating"></div>

      <div class="wave-two floating"></div>

      <div class="wave-three floating"></div>

      <div class="wave-threeb floating"></div>

这是完整的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <title>TTA1€</title>
    <script type="text/javascript" src="index\js\jquery.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="gallery.css" />
    <style>
      .body {
        background-image: url('https://i.ibb.co/3hvJmhk/images.jpg') no-repeat;
      }

      .container4 {
        background-image: url('https://i.ibb.co/3hvJmhk/images.jpg');
      }

      div.container4 {
        height: 60em;
        width: 1980px;
        align-items: center;
        align-self: center;
        text-align: center;
        position: absolute;
        bottom: 20px;
        left: 50%;
      }

      .wave-one {
        width: 1920px;
        height: 1000px;
        background: url('https://i.ibb.co/rQw4qHL/2.png') no-repeat;
        background-repeat: repeat-y;
        float: left;
        position: relative;
        z-index: 7;
        overflow: hidden;
      }

      .wave-two {
        width: 1920px;
        height: 1000px;
        background: url('https://i.ibb.co/tCkBV47/3.png') no-repeat;
        float: left;
        position: absolute;
        z-index: 5;
        overflow: hidden;
      }

      .wave-three {
        width: 1920px;
        height: 1000px;
        background: url('https://i.ibb.co/9wZGQmP/1.png') no-repeat;
        position: absolute;
        float: right;
        z-index: 6;
        left: 0;
        z-index: 6;
        overflow: hidden;
      }
      .wave-threeb {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        float: left;
        overflow: hidden;
        background: url('https://i.ibb.co/3hvJmhk/images.jpg') no-repeat;
      }

      /*
  ==============================================
  floating
  ==============================================
  */

      .floating {
        animation-name: floating;
        -webkit-animation-name: floating;

        animation-duration: 10s;
        -webkit-animation-duration: 10s;

        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
      }

      @keyframes floating {
        0% {
          transform: translateX(0%);
        }
        20% {
          transform: translateX(60%);
        }
        80% {
          transform: translateX(20%);
        }
        100% {
          transform: translateX(0%);
        }
      }

      @-webkit-keyframes floating {
        0% {
          -webkit-transform: translateX(0%);
        }
        50% {
          transform: translateX(100%);
        }
        80% {
          transform: translateX(150%);
        }
        100% {
          -webkit-transform: translateX(0%);
        }
      }

     

      .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: black;
        color: #ffffff;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <header></header>

    <div class="container4">
      <div class="wave-one floating"></div>

      <div class="wave-two floating"></div>

      <div class="wave-three floating"></div>

      <div class="wave-threeb floating"></div>
    </div>

    <div class="footer">
      <p>€</p>
    </div>

    <script></script>
  </body>
</html>

希望这会有所帮助

错误的背景动画分辨率

1 个答案: