有多张图片时，如何只在单张图片上应用CSS动画？

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动画？

How to apply CSS animation only on a single image when there are multiple images?

html

css

animation

keyframe

css-animations