<div class="coverflow">
	<a href="https://www.minwt.com/free/19712.html"><img src="https://dsf.minwt.com/img/Content/free/pngtree/pngtree_com_00.jpg"></a>
	<a href="https://www.minwt.com/free/19697.html"><img src="https://dsf.minwt.com/img/Content/free/uicookies-free-template/uicookies-free-template_00.jpg"></a>
	<a href="https://www.minwt.com/ps/15681.html"><img src="https://dsf.minwt.com/img/Content/free/adobe-pdf-ebook/adobe-pdf-ebook_00.jpg"></a>
</div>
.coverflow{
		width: 700px;
		height: 490px;
		position: relative;
	}
	.coverflow>a{
		display: block;
		position: absolute;
		top:0;
		left:0;
		opacity: 0;
    filter: alpha(opacity=0);
    /*當圖片數量增加,影片長度需更改,變為5s*圖片數量*/
    -webkit-animation: silder 15s linear infinite;
    				animation: silder 15s linear infinite;
	}
	.coverflow>a>img{
		max-width: 100%;
	}

/*動畫關鍵影格*/
	@-webkit-keyframes silder {
	    3% {
	        opacity: 1;
	        filter: alpha(opacity=100);
	    }
	    27% {
	        opacity: 1;
	        filter: alpha(opacity=100);
	    }
	    30% {
	        opacity: 0;
	        filter: alpha(opacity=0);
	    }
	}
	@keyframes silder {
	    3% {
	        opacity: 1;
	        filter: alpha(opacity=100);
	    }
	    27% {
	        opacity: 1;
	        filter: alpha(opacity=100);
	    }
	    30% {
	        opacity: 0;
	        filter: alpha(opacity=0);
	    }
	}

/*每個圖片各延遲5秒*/
	.coverflow>a:nth-child(3) {
		-webkit-animation-delay: 10s;
		        animation-delay: 10s;	            
	}

	.coverflow>a:nth-child(2) {
		-webkit-animation-delay: 5s;
		        animation-delay: 5s;
	}

	.coverflow>a:nth-child(1) {
		-webkit-animation-delay: 0s;
		        animation-delay: 0s;    
	}
/*滑入時停止播放*/
	.coverflow:hover>a{
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.