Question

在图像框下方，我希望在中间插入一个滑块，该滑块仅占据正中心的30％空间。

我希望在in_out中预览6张图像（徽标）中的1张。同时，我正在运行闪烁效果flicker。我非常接近，但由于某种原因，开始时所有徽标都会出现，而我无法使它们正常工作。

我一直在关注此tutorial

中的数字3

HTML：

.shadow {
  position: absolute;
  z-index:1;
  -webkit-animation: flicker 20s linear infinite both;
          animation: flicker 2s linear infinite both;        
}

@-webkit-keyframes in_out {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

.shadow img:nth-of-type(1) {
  animation-delay: 30s;
}
.shadow img:nth-of-type(2) {
  animation-delay: 24s;
}
.shadow img:nth-of-type(3) {
  animation-delay: 18s;
}
.shadow img:nth-of-type(4) {
  animation-delay: 12;
}
.shadow img:nth-of-type(5) {
  animation-delay: 6;
}
.shadow img:nth-of-type(6) {
  animation-delay: 0;
}

.shadow img {
  width: 250px;
  margin:14em;
  transform: translate(200px, -700px);
  margin-left: 250px;
  position:absolute;
  left:0;
  -webkit-transition: opacity 3s ease-in-out;

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

 <div class="slider"> 
            <img src="components/img/Rectangle.png" class="boxblack">
            <div id="cf" class ="shadow">
              <img src="https://www.antoniomar.co/components/img/logos/1.png">
              <img src="https://www.antoniomar.co/components/img/logos/2.png">
              <img src="https://www.antoniomar.co/components/img/logos/3.png">
              <img src="https://www.antoniomar.co/components/img/logos/4.png">
              <img src="https://www.antoniomar.co/components/img/logos/5.png">
              <img src="https://www.antoniomar.co/components/img/logos/6.png">
            </div>
          </div>

Answer 1

防止默认显示所有图像。您必须将opacity设置为zero。并且动画时间和延迟时间必须放在一起。查看摘要

.shadow {
  position: absolute;
  z-index:1;
  -webkit-animation: flicker 20s linear infinite both;
          animation: flicker 2s linear infinite both;        
}

@-webkit-keyframes in_out {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

.shadow img:nth-of-type(1) {
  animation-delay: 30s;
}
.shadow img:nth-of-type(2) {
  animation-delay: 24s;
}
.shadow img:nth-of-type(3) {
  animation-delay: 18s;
}
.shadow img:nth-of-type(4) {
  animation-delay: 12s;
}
.shadow img:nth-of-type(5) {
  animation-delay: 6s;
}
.shadow img:nth-of-type(6) {
  animation-delay: 0s;
}

.shadow img {
  width: 250px;
  margin:14em;
  transform: translate(200px, -700px);
  margin-left: 250px;
  position:absolute;
  left:0;
  opacity:0;
  -webkit-transition: opacity 6s ease-in-out;

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

<div class="slider"> 
            <img src="https://www.antoniomar.co/components/img/Rectangle.png" class="boxblack">
            <div id="cf" class ="shadow">
              <img src="https://www.antoniomar.co/components/img/logos/1.png">
              <img src="https://www.antoniomar.co/components/img/logos/2.png">
              <img src="https://www.antoniomar.co/components/img/logos/3.png">
              <img src="https://www.antoniomar.co/components/img/logos/4.png">
              <img src="https://www.antoniomar.co/components/img/logos/5.png">
              <img src="https://www.antoniomar.co/components/img/logos/6.png">
            </div>
          </div>

结合两个CSS效果

1 个答案: