我該如何使用圖片進行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; 
}