Question

我需要将“ 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>

我只希望第一张图像透明，以便第二张图像可见，依此类推。请帮忙。

Answer 1

您可以尝试类似

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;
  }
}

如果有多个图像，如何仅将CSS动画应用于单个图像？

1 个答案: