Question

我一直在尝试创建一个简单的图像滑块，其中显示一个网站的四个图像。我已经设法创建了幻灯片，但是每个图像之间的过渡确实非常快，并且我希望在效果上有所减弱，以便更平滑。关于此的许多问题已经建议使用jQuery，但我尝试仅使用CSS来完成。我也浏览了animate.css，但无法正常工作。感谢所有提供的帮助。谢谢:)

到目前为止，这里的代码：

HTML

   <div class="slider">
      <div class="feature">
      </div>
      <div class="overlay">

      </div>
   </div>

和CSS

.feature {
   animation: slide 3s;

}

.slider {
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
   height: 80vh;
   animation: slide 10s infinite;
}

.overlay {
   color: #fff;
   width: 100%;
   height: 80vh;
   background-color: rgba(0, 0, 0, 0.5);
}



@keyframes slide {
   0%{
      background-image: url(../resources/feature/Feature1.jpg);
   }

   25%{
      background-image: url(../resources/feature/Feature1.jpg);
   }

   25.1%{
      background-image: url(../resources/feature/Feature2.jpg);
   }

   50%{
      background-image: url(../resources/feature/Feature2.jpg);
   }
   50.01%{
      background-image: url(../resources/feature/Feature3.jpg);
   }

   75%{
      background-image: url(../resources/feature/Feature3.jpg);
   }

   75.01%{
      background-image: url(../resources/feature/Feature4.jpg);
   }

   100%{
      background-image: url(../resources/feature/Feature4.jpg);
   }
}

Answer 1

您必须设置“滑块”的opacity和transition才能获得效果。

.feature {

}

.slider {
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
   height: 80vh;
   transition: all .2s ease-in-out;
   animation: slide 10s infinite;
}

.overlay {
   color: #fff;
   width: 100%;
   height: 80vh;
   background-color: rgba(0, 0, 0, 0.5);
   transition: all .2s ease-in-out;
}



@keyframes slide {
   0%{
      opacity: 0;
      background-color: red;
   }

   20%{
   opacity: 1;
      background-color: red;
   }
   25%{
   opacity: 0;
      background-color: red;
   }
   25.1%{
   opacity: 0;
      background-color: blue;
   }

   45%{
   opacity: 1;
      background-color: blue;
   }
   50%{
   opacity: 0;
      background-color: blue;
   }
   50.01%{
   opacity: 0;
      background-color: yellow;
   }

   70%{
   opacity: 1;
      background-color: yellow;
   }
   75%{
   opacity: 0;
      background-color: yellow;
   }

   75.01%{
   opacity: 0;
      background-color: green;
   }

   95%{
   opacity: 1;
      background-color: green;
   }
   100%{
   opacity: 0;
      background-color: green;
   }
}

<div class="slider">
      <div class="feature">
      </div>
      <div class="overlay">

      </div>
   </div>

Answer 2

只需更改行

    WCHAR cmdLine[] = TEXT("console1.exe --version");
    CreateProcessW(exePath,cmdLine,...);

到

animation: slide 10s infinite;

这会给您一些过渡的时间。

Answer 3

您可以尝试处理动画的“不透明度”，并且没有其他创建和显示此滑块的方法。

     @keyframes slide {
   0%{
      background-image: url(https://image.flaticon.com/sprites/new_packs/178146-business-strategy.png);

   }
   48%{ opacity:0;
   }
   50%{
      opacity:1;
      background-image: url(https://images-eu.ssl-images-amazon.com/images/I/51TxXo0RLgL.png);

   }
   97%{ opacity:1;
   98%{ opacity:0;
    100%{
      opacity:1;
      background-image: url(https://image.flaticon.com/sprites/new_packs/178146-business-strategy.png);

   }
}

https://jsfiddle.net/m4tsudc7/21/

具有淡入效果的CSS图像滑块

3 个答案: