Test

# # # # #
/*CSS 區塊*/ .anime{ position: relative; height:300px; margin-top:20px; } .anime h3{ text-align: center; font-size:28px; } .anime a{ display: block; position: absolute; top:20%; left:35%; opacity: 0; filter: alpha(opacity=0); /*動畫全長時間設定*/ -webkit-animation: slider 20s linear infinite; animation: slider 20s linear infinite; } /*動畫關鍵影格, slider動畫名字*/ @-webkit-keyframes slider { 2.5% { opacity: 1; filter: alpha(opacity=100); } 17.5% { opacity: 1; filter: alpha(opacity=100); } 20% { opacity: 0; filter: alpha(opacity=0); } } @keyframes slider { 2.5% { opacity: 1; filter: alpha(opacity=100); } 17.5% { opacity: 1; filter: alpha(opacity=100); } 20% { opacity: 0; filter: alpha(opacity=0); } } /*每個圖片相隔4秒*/ .anime a:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } .anime a:nth-child(2) { -webkit-animation-delay: 4s; animation-delay: 4s; } .anime a:nth-child(3) { -webkit-animation-delay: 8s; animation-delay: 8s; } .anime a:nth-child(4) { -webkit-animation-delay: 12s; animation-delay: 12s; } .anime a:nth-child(5) { -webkit-animation-delay: 16s; animation-delay: 16s; } /*當滑鼠移動到圖片的區塊時,動畫暫停*/ .anime a:hover{ -webkit-animation-play-state: paused; animation-play-state: paused; }