Как применить анимацию CSS только к одному изображению, когда есть несколько изображений? - PullRequest
Новая
       22

Как применить анимацию CSS только к одному изображению, когда есть несколько изображений?

0 голосов
/ 02 января 2019

Мне нужно применить анимацию "fadeInOut" к моему CSS-коду. У меня есть два изображения на заднем плане, расположенных друг над другом. Я использовал ключевые кадры CSS для определения двух состояний - одно с непрозрачным верхним изображением, другое с прозрачным. Как мне получить это только на первом (верхнем) изображении, а не на обоих? 

#hero {
  width: 100%;
  height: 100vh;
  background: url(../img/1.jpg), url(../img/2.jpg);
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;


  animation-name: cf3FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 10s;
  animation-direction: alternate;
}

@keyframes cf3FadeInOut {
  0% {opacity:1;}
  45% {opacity:1;}
  55% {opacity:0;}
  100% {opacity:0;}
}

@media (min-width: 1024px) {
 #hero {
   background-attachment: fixed;
  }
}

Ниже приведен HTML-код. 

<section id="hero">
   <div class="hero-logo">
     <img class="" src="img/logo.png" alt="img_logo">
   </div>
   <div class="actions">
     <a href="#about" class="btn-get-started">Get Strated</a>
     <a href="#services" class="btn-services">Our Services</a>
   </div>
</section>

Я хочу, чтобы только первое изображение стало прозрачным, чтобы было видно второе изображение и так далее. Пожалуйста, помогите.

1 Ответ

0 голосов
/ 02 января 2019

Вы можете попробовать что-то вроде

HTML 

<section>
  <div id="bgimg">
    <div  id="hero">
     <div class="hero-logo">
       <img class="" src="img/logo.png" alt="img_logo">
     </div>
     <div class="actions">
       <a href="#about" class="btn-get-started">Get Strated</a>
       <a href="#services" class="btn-services">Our Services</a>
     </div>
     </div> 
  </div>
</section>

CSS 

#bgimg{
    background: url(../img/2.jpg);
    width:100%;
    height:100%;
}
#hero {
  width: 100%;
  height: 100vh;
  background: url(../img/1.jpg);
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;


  animation-name: cf3FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 10s;
  animation-direction: alternate;
}

@keyframes cf3FadeInOut {
  0% {opacity:1;}
  45% {opacity:1;}
  55% {opacity:0;}
  100% {opacity:0;}
}

@media (min-width: 1024px) {
 #hero {
   background-attachment: fixed;
  }
}
...