ミギムキ

[CSS] 画像がフェードインするスライドショーをCSSだけで作る

サンプルコード

html

<ul class="slider_fade"> <li><img src="./images/slider_01.jpg"></li> <li><img src="./images/slider_02.jpg"></li> <li><img src="./images/slider_03.jpg"></li> </ul>
スポンサー広告

CSS

.slider_fade { position: relative; } .slider_fade > li { position: absolute; list-style: none; visibility: hidden; animation: anime_slider_fade 12s 0s infinite; } .slider_fade > li:nth-of-type(2) { animation-delay: 4s; } .slider_fade > li:nth-of-type(3) { animation-delay: 8s; } @keyframes anime_slider_fade { 0% { visibility: visible; opacity: 0; } 15% { opacity: 1; } 33.3% { opacity: 1; } 48.3% { opacity: 0; } 100% { opacity: 0; } }

ソースコードの解説

スポンサー広告