Блог

Главная - Вопросы по программированию - Есть ли более простой способ использовать одну картинку, но показывать ее на веб-сайте много раз с разными позициями?

Есть ли более простой способ использовать одну картинку, но показывать ее на веб-сайте много раз с разными позициями?

#html #css #optimization #html-helper

#HTML #css #оптимизация #html-помощник

Вопрос:

Весь код, который у меня есть на данный момент, находится там, я новичок в HTML

Итак, я хочу, чтобы эти так называемые «морковные» изображения падали сверху веб-сайта в качестве «анимации загрузки», но единственный способ, который я пока выяснил, — это создать несколько версий одного изображения и присвоить им всем разные идентификаторы, поскольку мне нужно каждоеморковь должна находиться в другом положении на X кординате

Я придумал, как придать каждой картинке одинаковую анимацию, и у меня есть анимация, мне просто нужен способ создать все эти изображения без такого большого количества кода, или это единственный способ, в то время как все картинки также должны находиться в случайном положении накординат X или что-либо, что вы задаете как.

Это моя часть HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS</title>
        <link rel="stylesheet" href="stylesheet.css">
    
    </head>
    <body>
        <div id="mainContainer">
            <img id="carrot" src="images/carrot.png" alt="">
            <img id="carrot1" src="images/carrot.png" alt="">
            <img id="carrot2" src="images/carrot.png" alt="">
            <img id="carrot3" src="images/carrot.png" alt="">
        </div>
    
    </body>
    </html>

ЧАСТЬ CSS

 #carrot {
  width: 56px;
  z-index: 0;
  position: relative;
  right: -10px;
  bottom: 0px;
  animation-name: fall;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}
#carrot1 {
  width: 56px;
  z-index: 0;
  position: relative;
  right: -190px;
  bottom: 0px;
  animation-name: fall;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}
#carrot2 {
  width: 56px;
  z-index: 0;
  position: relative;
  right: -290px;
  bottom: 0px;
  animation-name: fall;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}
#carrot3 {
  width: 56px;
  z-index: 0;
  position: relative;
  right: -500px;
  bottom: 0px;
  animation-name: fall;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

@keyframes fall {
  0% { transform: translateY(0px); opacity: 1; }
  25% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { transform: translateY(1400px); opacity: 0.3; }
}

Комментарии:

1. Рассматривали ли вы возможность использования canvas вместо этого? Погуглите.

Ответ №1:

Я могу предложить решение для javascript. Используется путем createElement присвоения URL-адресов изображению и присвоения класса. Обратите внимание, что mainContainer изначально в структуре html пусто.

Кроме того, для каждого carrot .carrot:nth-child() в css был добавлен псевдокласс, чтобы назначить уникальное правило right .

 var container = document.querySelector('#mainContainer'); 

for(var i = 0; i < 4; i  ) { 
  var img = document.createElement('img'); 
  img.className = 'carrot';
  img.src = 'https://banner2.cleanpng.com/20180620/gl/kisspng-monument-valley-2-level-cheating-in-video-games-5b29fd2c754be5.5312592115294784444805.jpg';
  container.append(img);
} 
 .carrot {
  width: 56px;
  z-index: 0;
  position: relative;
  right: -10px;
  bottom: 0px;
  animation-name: fall;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

.carrot:nth-child(1) {
  right: -10px;
}

.carrot:nth-child(2) {
  right: -190px;
}

.carrot:nth-child(3) {
  right: -290px;
}

.carrot:nth-child(4) {
  right: -500px;
}

@keyframes fall {
  0% { transform: translateY(0px); opacity: 1; }
  25% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { transform: translateY(1400px); opacity: 0.3; }
} 
 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS</title>
        <link rel="stylesheet" href="stylesheet.css">
    
    </head>
    <body>
        <div id="mainContainer">
         
        </div>
    
    </body>
    </html>

Ответ №2:

Вы можете использовать класс в CSS для назначения вещей, которые являются общими для нескольких элементов. В этом примере я создал класс falling . Вы также можете использовать фоновый URL-адрес в CSS в этом классе, который также будет применяться ко всем элементам. И в этом примере я сделал именно это, и вместо использования img в HTML я использовал div фоновое изображение. Я надеюсь, что это ответ на ваш вопрос!

 .falling {
  background: no-repeat url("https://external-content.duckduckgo.com/iu/?u=https://image.flaticon.com/icons/png/512/591/591329.pngamp;f=1amp;nofb=1") 50% / 100%;
  width: 56px;
  height: 56px;
  z-index: 0;
  position: relative;
  bottom: 0px;
  animation-name: fall;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

#carrot {
  right: -10px;
}

#carrot1 {
  right: -190px;
}

#carrot2 {
  right: -290px;
  }

#carrot3 {
  right: -500px;
}

@keyframes fall {
  0% { transform: translateY(0px); opacity: 1; }
  25% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { transform: translateY(1400px); opacity: 0.3; }
} 
 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS</title>
        <link rel="stylesheet" href="stylesheet.css">
    
    </head>
    <body>
        <div id="mainContainer">
        <div id="carrot" class="falling"></div>
        <div id="carrot1" class="falling"></div>
        <div id="carrot2" class="falling"></div>
        <div id="carrot3" class="falling"></div>
        </div>
    
    </body>
    </html>
Метки: ,