Jump to content
  • 0

появляются тонкие серые полосы ни как не получается убрать

__kirill__

Asked by __kirill__,

 Share

Question

__kirill__ Explorer

__kirill__

Posted
Posted

ПОМОГИТЕ!!! Сделал анимация фона через div, а не body и появились со всех сторон тонкие серые полосы которые ни как не убираются.  

<!DOCTYPE html>
 <html>
  <head> 
      <meta charset="UTF-8">
      <title>LEGO MINECRAFT 2021</title>
      <link rel="icon" href="https://www.gongoll.de/media/image/cf/3d/18/lego-logo-04.png">
      <link rel="stylesheet" href="../CSS/css.legominecraftyears.css">
     
  </head>

    <body style="background-color: gray; width: 1903px; height: 1540px;">

      <!--КОРОБКА ДЕЛАЮЩАЯ МЕНЯЮЩИЙСЯ ФОН-->
    <div   class="module-slider-background"  style="display: flex; flex-wrap: wrap; width: 1903px; height: 1540px; background-size: cover; background-attachment: fixed;">
      <!--IMG КОТОРЫЕ МЕНЯЮТСЯ НА ФОНЕ-->
      <img alt="" style="background-size: cover; background-image: url(../IMG/lego.paseka.png); background-attachment: fixed;"/>
      <img alt="" style="background-size: cover; background-image: url(../IMG/lego.tofgov.post.png);  background-attachment: fixed;"/>
      <img alt="" style="background-size: cover; background-image: url(../IMG/lego.cawe.png); background-attachment: fixed;"/>
      <img alt="" style="background-size: cover;  background-attachment: fixed; background-image: url(../IMG/lego.podwodnii.mir.png);"/>
      <img alt="" style="background-size: cover;  background-attachment: fixed; background-image: url(../IMG/lego.homsvin.png);"/>
      <img alt="" style="background-size: cover;  background-attachment: fixed; background-image: url(../IMG/lego.duelad4.png);"/>

    </div>
    <!--ПОДКЛЮЧЕНИЕ СКРИПТОВ-->
     <script src="../JS/js.legominecraftgoyears.js"></script>
    
     <!--КОРБКА С СЕРЫМ ФОНОМ НА КОТОРОЙ НАХОДЯТСЯ ДРУГИЕ div-->
     <div style=" width: 1100px;height: 1537px;background-color:rgb(70, 70, 70);position: absolute;left: 20.5%;border-radius: 20px; margin: 0px;padding: -10px; border: 5px inset gray;">


      <h1 style="color: white; text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">LEGO MINECRAFT 2021</h1>
     

      <div class="rollover">
      
        <h1 style="font-size: 25px; position: absolute; left: 40%; color:  white;  text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">Пасека</h1>
        <h1 style="font-size: 15px; left: 36.5%; top: 6%; color: white;  text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">Minecraft 21165</h1>
        <h1 style="font-size: 30px; left: 38.5%; top: 90%; color: white;  text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">1699р</h1>
      

      <style>
        /*ВИД ПЕРВОЙ КАРТИНКИ АНИМАЦИИ*/
      div.rollover{ 
        background: url(https://static.mir-kubikov.ru/upload/resize_cache/iblock/628/746_580_140cd750bba9870f18aada2478b24840a/6285ba815fdec3b7b8ada6101fe73fb2.jpg);
        border-radius: 15px; width: 500px; height: 450px; position: absolute; left: 1.3%; top: 3.4%; border: 5px inset gainsboro; background-position: center; background-color: gainsboro;
        transition: 0.2s;}

        /*ВИД КАРТИНКИ КОГДА НА НЕЙ КУРСОР*/
      div.rollover:hover{animation: smena1 0.2s; width: 500px; height: 450px; background: url(../IMG/lego.paseka2.jpg); background-position: center;}
      
        /*КОЛИЧЕСТВО IMG И ДОПОЛНИТЕЛЬНЫЕ ПАРАМЕТРЫ*/
      @keyframes smena1 {
    0% {background: url(https://static.mir-kubikov.ru/upload/resize_cache/iblock/628/746_580_140cd750bba9870f18aada2478b24840a/6285ba815fdec3b7b8ada6101fe73fb2.jpg);
        background-position: center;
   }
    100% {background: url(../IMG/lego.paseka2.jpg); background-position: center;}}
    </style>
    </div>
    </div>


      <div class="rollover2">

      <!--АНИМАЦИЯ НАБОРА-->
        <style>
      /*ВИД ПЕРВОЙ КАРТИНКИ*/
      div.rollover2{ border-radius: 15px; width: 500px; height: 450px; position: absolute; left: 50.87%; top: 6%; border: 5px inset gainsboro; background-position: center; background-image: url(https://static.mir-kubikov.ru/upload/resize_cache/iblock/ed0/746_580_140cd750bba9870f18aada2478b24840a/ed027b7fe4f020292adda12eadd9b4f0.jpg);
      transition: 0.2s;}
       
      /*ВИД КАРТИНКИ КОГДА НА НЕЙ КУРСОР*/
      div.rollover2:hover{animation: smena2 0.2s; width: 500px; height: 450px; background: url(../IMG/lego.torgov.post2.jpg); background-position: center;}
       
      /*КОЛИЧЕСТВО IMG И ДОПОЛНИТЕЛЬНЫЕ ПАРАМЕТРЫ*/
      @keyframes smena2 {
    0% {background: url(https://static.mir-kubikov.ru/upload/resize_cache/iblock/ed0/746_580_140cd750bba9870f18aada2478b24840a/ed027b7fe4f020292adda12eadd9b4f0.jpg);
        background-position: center;
   }
    100% {background: url(../IMG/lego.torgov.post2.jpg); background-position: center;}}
       </style>
      <!--НАДПИСИ НА div НАБОРА-->
      <h1 style="font-size: 25px; position: absolute; left: 32%; color:  white; text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">Торговый пост</h1>
       <h1 style="font-size: 15px; left: 38.8%; top: 6.5%; color: white; text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">Minecraft 21167</h1>
       <h1 style="font-size: 30px; left: 40.5%; top: 90%; color: white;  text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">1699р</h1>
      </div>


      <div class="rollover3"> 
      <!--АНИМАЦИЯ НАБОРА-->
         <style>
      /*ВИД ПЕРВОЙ КАРТИНКИ*/
           div.rollover3{
      border-radius: 15px; width: 500px; height: 450px; position: absolute; left: 21.5%; top: 59.5%; border: 5px inset gainsboro; background: url(https://static.mir-kubikov.ru/upload/resize_cache/iblock/d7b/746_580_140cd750bba9870f18aada2478b24840a/d7b9a9a605768628069a8d906667638e.jpg);  background-position: center;
      transition: 0.2s;}
       
      /*ВИД КАРТИНКИ КОГДА НА НЕЙ КУРСОР*/
           div.rollover3:hover{animation: smena3 0.2s; width: 500px; height: 450px; background: url(../IMG/lego.cawe2.jpg); background-position: center;}
         
      /*КОЛИЧЕСТВО IMG И ДОПОЛНИТЕЛЬНЫЕ ПАРАМЕТРЫ*/
           @keyframes smena3 {
    0% {background: url(https://static.mir-kubikov.ru/upload/resize_cache/iblock/d7b/746_580_140cd750bba9870f18aada2478b24840a/d7b9a9a605768628069a8d906667638e.jpg);
        background-position: center;
   }
    100% {background: url(../IMG/lego.cawe2.jpg); background-position: center;}}
         </style>
        
        <!--НАДПИСИ НА div НАБОРА-->
        <h1 style="font-size: 25px; position: absolute; left: 22%; color:  white;  text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">«Заброшенная» шахта</h1>
        <h1 style="font-size: 15px; left: 37.5%; top: 6%; color: white;  text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">Minecraft 21166</h1>
        <h1 style="font-size: 30px; left: 40.5%; top: 90%; color: white;  text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">1699р</h1>
      </div>


      <div class="rollover4">

      <!--АНИМАЦИЯ НАБОРА-->
         <style>
      
      /*ВИД ПЕРВОЙ КАРТИНКИ*/
         div.rollover4 {border-radius: 15px; width: 500px; height: 450px; position: absolute; left: 50.87%; top: 59.5%; border: 5px inset gainsboro; background: url(https://static.mir-kubikov.ru/upload/resize_cache/iblock/18b/746_580_140cd750bba9870f18aada2478b24840a/18be18a6d027399922794cc84f25c5a4.jpg); background-position: center;
        transition: 0.2s;}
        
      /*ВИД КАРТИНКИ КОГДА НА НЕЙ КУРСОР*/
         div.rollover4:hover{animation: smena4 0.2s; width: 500px; height: 450px; background: url(../IMG/lego.podwodnii.mir2.jpg); background-position: center;}
         
      /*КОЛИЧЕСТВО IMG И ДОПОЛНИТЕЛЬНЫЕ ПАРАМЕТРЫ*/
         @keyframes smena4 {
    0% {background: url(https://static.mir-kubikov.ru/upload/resize_cache/iblock/18b/746_580_140cd750bba9870f18aada2478b24840a/18be18a6d027399922794cc84f25c5a4.jpg);
        background-position: center;
   }
    100% {background: url(../IMG/lego.podwodnii.mir2.jpg); background-position: center;}}
      </style>
        
        <!--НАДПИСИ НА div набора-->
        <h1 style="font-size: 25px; position: absolute; left: 28%; color:  white;  text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">Коралловый риф</h1>
        <h1 style="font-size: 15px; left: 37.5%; top: 6%; color: white;  text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">Minecraft 21164</h1>
        <h1 style="font-size: 30px; left: 40.5%; top: 90%; color: white;  text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">899р</h1>
      </div>


       <div class="rollover5">

      <!--АНИМАЦИЯ НАБОРА-->
         <style>

      /*ВИД ПЕРВОЙ КАРТИНКИ*/
          div.rollover5 {
     border-radius: 15px; width: 500px; height: 450px; position: absolute; left: 21.5%; top: 113%; border: 5px inset gainsboro; background: url(https://static.mir-kubikov.ru/upload/resize_cache/iblock/43e/746_580_140cd750bba9870f18aada2478b24840a/43ed38ac024f7d681d9b347d32a450f8.jpg); background-position: center;
     transition: 0.2s;}
        
      /*ВИД КАРТИНКИ КОГДА НА НЕЙ КУРСОР*/
          div.rollover5:hover {
            animation: smena5 0.2s;
             width: 500px; height: 450px; background: url(../IMG/lego.homsvin2.jpg); background-position: center;}
          
      /*КОЛИЧЕСТВО IMG И ДОПОЛНИТЕЛЬНЫЕ ПАРАМЕТРЫ*/
          @keyframes smena5 {
    0% {background: url(https://static.mir-kubikov.ru/upload/resize_cache/iblock/43e/746_580_140cd750bba9870f18aada2478b24840a/43ed38ac024f7d681d9b347d32a450f8.jpg);
        background-position: center;
    }
    100% {background: url(../IMG/lego.homsvin2.jpg); 
        background-position: center; 
    }}
   </style>

        <!--НАДПИСИ НА div НАБОРА-->
        <h1 style="font-size: 25px; position: center; left: 35%; color:  white;  text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">Дом-свинья</h1>
        <h1 style="font-size: 15px; position: center; left: 37.8%; top: 7%; color: white;  text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">Minecraft 21170</h1>
        <h1 style="font-size: 30px; left: 39.5%; top: 90%; color: white;  text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">4399р</h1>
      </div>


      <div class="rollover6">

      <!--АНИМАЦИЯ НАБОРА-->
         <style>

          /*ВИД ПЕРВОЙ КАРТИНКИ*/
          div.rollover6{ border-radius: 15px; width: 500px; height: 450px; position: absolute; left: 50.87%; top: 113%; border: 5px inset gainsboro; background: url(../IMG/lego.duelad.jpg); background-position: center; background-size: 100%; background-repeat: no-repeat; background-size: cover;
          transition: 0.2s;}
          
          /*ВИД КАРТИНКИ КОГДА НА НЕЙ КУРСОР*/
          div.rollover6:hover{animation: smena6 0.2s; width: 500px; height: 450px; background: url(../IMG/lego.duelad3.jpg); background-position: center; background-repeat: no-repeat; background-size: 162%;}

          /*КОЛИЧЕСТВО IMG И ДОПОЛНИТЕЛЬНЫЕ ПАРАМЕТРЫ*/
          @keyframes smena6 {
    0% {background: url(../IMG/lego.duelad.jpg);
        background-position: center;

        background-size: 100%;
        background-repeat: no-repeat;
        background-color: white;
    }
    100% {background: url(../IMG/lego.duelad3.jpg); 
        background-position: center; 
        background-size: 162%;
        background-repeat: no-repeat;
    }}
    </style>
      
      <!--НАДПИСИ НА div НАБОРА-->
        <h1 style="font-size: 25px; position: center; color:  white;  text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">The Nether Duel</h1>
        <h1 style="font-size: 15px; position: center; left: 41%; top: 6%; color: white;  text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">Minecraft 30331</h1>
        <h1 style="font-size: 30px; left: 46.5%; top: 90%; color: white;  text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">—</h1>
      </div> 
    </div>
  </body>
 </html>
* {
    margin: 0;
    padding: 0;
  }






h1{
  font-family: 'TREBUCHET MS', Times, serif;
  position: absolute;
  left: 33%;
}

@-webkit-keyframes anim1 {
  0% {
    opacity: 1;
  }
  11.1% {
    opacity: 1;
  }
  16.6% {
    opacity: 0;
  }
  94.4% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes anim1 {
  0% {
    opacity: 1;

  }
  11.1% {
    opacity: 1;
  }
  16.6% {
    opacity: 0;
  }
  94.4% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes anim2 {
  0% {
    opacity: 0;
  }
  11.1% {
    opacity: 0;
  }
  16.6% {
    opacity: 1;
  }
  27.7% {
    opacity: 1;
  }
  33.3% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes anim2 {
  0% {
    opacity: 0;
  }
  11.1% {
    opacity: 0;
  }
  16.6% {
    opacity: 1;
  }
  27.7% {
    opacity: 1;
  }
  33.3% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes anim3 {
  0% {
    opacity: 0;
  }
  27.7% {
    opacity: 0;
  }
  33.3% {
    opacity: 1;
  }
  44.4% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes anim3 {
  0% {
    opacity: 0;
  }
  27.7% {
    opacity: 0;
  }
  33.3% {
    opacity: 1;
  }
  44.4% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes anim4 {
  0% {
    opacity: 0;
  }
  44.4% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  61.1% {
    opacity: 1;
  }
  66.6% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes anim4 {
  0% {
    opacity: 0;
  }
  44.4% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  61.1% {
    opacity: 1;
  }
  66.6% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes anim5 {
  0% {
    opacity: 0;
  }
  61.1% {
    opacity: 0;
  }
  66.6% {
    opacity: 1;
  }
  77.7% {
    opacity: 1;
  }
  83.3% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes anim5 {
  0% {
    opacity: 0;
  }
  61.1% {
    opacity: 0;
  }
  66.6% {
    opacity: 1;
  }
  77.7% {
    opacity: 1;
  }
  83.3% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes anim6 {
  0% {
    opacity: 0;
  }
  77.7% {
    opacity: 0;
  }
  83.3% {
    opacity: 1;
  }
  94.4% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes anim6 {
  0% {
    opacity: 0;
  }
  77.7% {
    opacity: 0;
  }
  83.3% {
    opacity: 1;
  }
  94.4% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }}
  @-webkit-keyframes anim6 {
    0% {
      opacity: 0;
    }
    77.7% {
      opacity: 0;
    }
    83.3% {
      opacity: 1;
    }
    94.4% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

*,
*:after,
*:before {
  padding: 0;
  margin: 0;
  outline: 0;
  
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/
.module-slider-background {

  /*если нужен как фон, добавить родителю position: relative*/
  position: absolute  ;
  z-index: -99;
  /*размер можно менять. Если родитель relative, то по 100% сделают фон*/
  height: 200px;
  width: 250px;
  background-attachment: fixed;

}
.module-slider-background > img {
  position: absolute;
  background-attachment: fixed;
  width: 1903px;
  height: 1549px;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  -webkit-animation: anim 120s linear infinite;
          animation: anim 120s linear infinite;

}
.module-slider-background > img:first-child {
  -webkit-animation-name: anim1;
          animation-name: anim1;
          background-attachment: fixed;

}
.module-slider-background > img:nth-child(2) {
  -webkit-animation-name: anim2;
          animation-name: anim2;
          background-attachment: fixed;

}
.module-slider-background > img:nth-child(3) {
  -webkit-animation-name: anim3;
          animation-name: anim3;
          background-attachment: fixed;

}
.module-slider-background > img:nth-child(4) {
  -webkit-animation-name: anim4;
          animation-name: anim4;
          background-attachment: fixed;

}
.module-slider-background > img:nth-child(5) {
  -webkit-animation-name: anim5;
          animation-name: anim5;
          background-attachment: fixed;

}
.module-slider-background > img:nth-child(6) {
  -webkit-animation-name: anim6;
          animation-name: anim6;
          background-attachment: fixed;

}

 

bandicam 2021-02-14 17-48-10-189.jpg

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0
Full-R Explorer

Full-R

Posted
Posted

Не хочется вас обидеть, но надо не в Minecraft играть, а учиться верстать дальше. Отвратительный тупой говнокод.

Ошибка в том, что вы задали height для всех элементов и верстаете под один экран.

  

.module-slider-background > img {
  position: absolute;
  background-attachment: fixed;
  width: 1903px;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  -webkit-animation: anim 120s linear infinite;
          animation: anim 120s linear infinite;

}

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept