Как разместить анимированные изображения CSS за div?

.znak{
    width: 650px;
    position: absolute;
    left: 33%;
    top: 44%;
    animation-name: padanjeznaka;
    animation-duration: 2s;
    animation-timing-function: linear;
}
@keyframes padanjeznaka{
    0%{top: -700%;}
    90%{top: 44%;}
    95%{top: 36%;}
    100%{top: 44%;}
}
.tznak{
    word-spacing: 80px;
    font-size: xx-large;
    position: absolute;
    left: 41.5%;
    transform: rotate(-2deg);
    top: 47.5%;
    animation-name: padanjeznakateksta;
    animation-duration: 2s;
    animation-timing-function: linear;
    font-style: inherit;
    color: azure;
}
@keyframes padanjeznakateksta{
    0%{top: -700%;}
    90%{top: 47.5%;}
    95%{top: 38.5%;}
    100%{top: 47.5%;}
}
.strelice{
    width: 80px;
    position: absolute;
    top: 55%;
    left: 53.5%;
    animation-name: padanjeznakastrelice;
    animation-duration: 2s;
    animation-timing-function: linear;
}
@keyframes padanjeznakastrelice{
    0%{top: -700%;}
    90%{top: 55%;}
    95%{top: 44%;}
    100%{top: 55%;}
}
.jeszim{
    width: 900px;
    height: 400px;
    background-color: rgb(240, 255, 255,0.6);
    position: absolute;
    left: 26%;
    animation-name: pad;
    animation-duration: 4s;
    animation-timing-function: linear;
}
@keyframes pad{
    0%{top: -100%;}
    100%{top: 0%;}
}
.pahulje{
    width: 200px;
    position: absolute;
    animation-name: pahuljepad;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes pahuljepad{
    0%{top: -70%;}
    25%{transform: rotate(22.5deg);}
    50%{transform: rotate(45deg);}
    75%{transform: rotate(67.5deg);}
    100%{top: 100%; transform: rotate(90deg);}
}

<html>
    <head>
        <title>ZIMA</title>
        <link rel = "stylesheet" href = "doba.css">
    </head>
    <body style = "background-image: url(Slike/zima.jpg);">
        <img src = "Slike/Sign-PNG-Pic.png" class = "znak">
        <p class = "tznak">JESEN PROLJEĆE</p>
       <a href = "proljece.html">
        <img src = "slike/white-right-arrow-image-download-1.png" class = "strelice" style = "transform: rotate(-4deg);">
    </a>
       <a href = "jesen.html">
        <img src = "slike/white-right-arrow-image-download-1.png" class = "strelice" style = "transform: rotate(178deg); left: 41.5%;top: 56%;">
     </a>
<div class = "jeszim"> </div>
<img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 12s;">
<img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 12s;left: 80%;">
<img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 14s;left: 40%;">
<img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 17s;left: 73%;">
<img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 20s;left: 30%;">
<img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 15s;left: 55%;">
<img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 18s;left: 15%;">
<img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 12s;">
<img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 12s;left: 25%;">
<img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 19s;left: 47%;">
<img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 16s;left: 67%;">
<img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 26s;left: 30%;">
<img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 17s;left: 65%;">
<img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 23s;left: 35%;">
    </body>
</html>

Итак, я хочу знать, как мне скрыть изображение за div, пока изображение движется вниз за ним? Я выложу сюда гифку, чтобы ее было видно: https://gyazo.com/6b788ebf600e0373ad0bd7d2975f3adf Как видите, снежинки идут впереди div, а я хочу, чтобы они были позади div. Какие-нибудь советы?

html css css-animations keyframe

28.03.2022 19:51

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Добавьте z-index: -1; в свой класс изображений .pahulje. Это гарантирует, что снежинки будут отставать от div. Я отрегулировал непрозрачность, чтобы вы могли видеть его за частично прозрачным div.

.znak {
  width: 650px;
  position: absolute;
  left: 33%;
  top: 44%;
  animation-name: padanjeznaka;
  animation-duration: 2s;
  animation-timing-function: linear;
}

@keyframes padanjeznaka {
  0% {
    top: -700%;
  }
  90% {
    top: 44%;
  }
  95% {
    top: 36%;
  }
  100% {
    top: 44%;
  }
}

.tznak {
  word-spacing: 80px;
  font-size: xx-large;
  position: absolute;
  left: 41.5%;
  transform: rotate(-2deg);
  top: 47.5%;
  animation-name: padanjeznakateksta;
  animation-duration: 2s;
  animation-timing-function: linear;
  font-style: inherit;
  color: azure;
}

@keyframes padanjeznakateksta {
  0% {
    top: -700%;
  }
  90% {
    top: 47.5%;
  }
  95% {
    top: 38.5%;
  }
  100% {
    top: 47.5%;
  }
}

.strelice {
  width: 80px;
  position: absolute;
  top: 55%;
  left: 53.5%;
  animation-name: padanjeznakastrelice;
  animation-duration: 2s;
  animation-timing-function: linear;
}

@keyframes padanjeznakastrelice {
  0% {
    top: -700%;
  }
  90% {
    top: 55%;
  }
  95% {
    top: 44%;
  }
  100% {
    top: 55%;
  }
}

.jeszim {
  width: 900px;
  height: 400px;
  background-color: rgb(240, 255, 255, 0.8);
  position: absolute;
  left: 26%;
  animation-name: pad;
  animation-duration: 4s;
  animation-timing-function: linear;
}

@keyframes pad {
  0% {
    top: -100%;
  }
  100% {
    top: 0%;
  }
}

.pahulje {
  width: 200px;
  position: absolute;
  z-index: -1;
  animation-name: pahuljepad;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes pahuljepad {
  0% {
    top: -70%;
  }
  25% {
    transform: rotate(22.5deg);
  }
  50% {
    transform: rotate(45deg);
  }
  75% {
    transform: rotate(67.5deg);
  }
  100% {
    top: 100%;
    transform: rotate(90deg);
  }
}

<html>

<head>
  <title>ZIMA</title>
  <link rel = "stylesheet" href = "doba.css">
</head>

<body style = "background-image: url(Slike/zima.jpg);">
  <img src = "Slike/Sign-PNG-Pic.png" class = "znak">
  <p class = "tznak">JESEN PROLJEĆE</p>
  <a href = "proljece.html">
    <img src = "slike/white-right-arrow-image-download-1.png" class = "strelice" style = "transform: rotate(-4deg);">
  </a>
  <a href = "jesen.html">
    <img src = "slike/white-right-arrow-image-download-1.png" class = "strelice" style = "transform: rotate(178deg); left: 41.5%;top: 56%;">
  </a>
  <div class = "jeszim"> </div>
  <img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 12s;">
  <img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 12s;left: 80%;">
  <img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 14s;left: 40%;">
  <img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 17s;left: 73%;">
  <img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 20s;left: 30%;">
  <img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 15s;left: 55%;">
  <img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 18s;left: 15%;">
  <img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 12s;">
  <img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 12s;left: 25%;">
  <img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 19s;left: 47%;">
  <img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 16s;left: 67%;">
  <img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 26s;left: 30%;">
  <img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 17s;left: 65%;">
  <img src = "slike/14-snowflake-png-image.png" class = "pahulje" style = "animation-duration: 23s;left: 35%;">
</body>

</html>

28.03.2022 20:19

Другие вопросы по теме

Почему высота строки ведет себя странно с универсальным селектором?

Центрирование div с помощью css в nextjs (перемещается, но не центрируется полностью)

Как добавить пользовательский CSS в компонент PrimeVue, который имеет собственный встроенный CSS?

Как сделать эффект «многоточие» для нестроковых элементов и ограничить количество строк до 2?

Как получить разный цвет фона для разных полей ввода

CSS/Bootstrap Поместите набор кнопок сверху (и внутри) другого div

Material-ui: нужна помощь, чтобы скрыть значок раскрывающегося списка в <Select>

Как остановить рост гибкого элемента над окном

Обтекание текста CSS вокруг изображения с выравниванием по левому краю

Размещение курсора текстового поля с выравниванием по правому краю после пробела

Как разместить анимированные изображения CSS за div?

Ответы 1

Другие вопросы по теме

Похожие вопросы