我该如何使用图片进行CSS动画，这些图片会自动播放。 （没有用户交互）

Question

我想，但我只知道如何使图像滑块使用Javascript ...任何人都可以建议或给一个代码，以帮助我开始？

我曾尝试使用Java脚本，但它不符合我的需要。

Answer 1

你可以简单地通过使用CSS动画和改变不同的图像的透明度实现这一目标。这是一个codepen演示如何这样做。

HTML

<div class="fade-container"> 
    <img src="http://fillmurray.com/200/300" alt="Fading image" class="fade-img"/> 
    <img src="https://source.unsplash.com/random" alt="Fading image" class="fade-img"/> 
    <img src="https://placeimg.com/640/480/any" alt="Fading image" class="fade-img"/> 
    <img src="http://pipsum.com/435x310.jpg" alt="Fading image" class="fade-img"/> 
</div> 

CSS

.fade-container { 
    position: relative; 
} 

.fade-img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 300px; 
} 

@keyframes fade { 
    0% { 
    opacity: 0; } 
    4% { 
    opacity: 1; } 
    21% { 
    opacity: 1; } 
    25% { 
    opacity: 0; 
    -webkit-animation-delay: 9s; 
    animation-delay: 9s; } 
    100% { 
    opacity: 0; 
    -webkit-animation-delay: 9s; 
    animation-delay: 9s; } 
} 
.fade-img:nth-child(1) { 
    animation: fade 12s ease-in-out infinite; 
} 

.fade-img:nth-child(2) { 
    animation: fade 12s ease-in-out infinite; 
    animation-delay: 3s; 
    opacity: 0; 
} 

.fade-img:nth-child(3) { 
    animation: fade 12s ease-in-out infinite; 
    animation-delay: 6s; 
    opacity: 0; 
} 
.fade-img:nth-child(4) { 
    animation: fade 12s ease-in-out infinite; 
    animation-delay: 9s; 
    opacity: 0; 
}