Jump to content

__kirill__

Neophyte
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

 Content Type 

Everything posted by __kirill__

  1. __kirill__
    ПОМОГИТЕ!!! Сделал анимация фона через 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; }
×
×
  • 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