[CSS] 画像がフェードインするスライドショーをCSSだけで作る
クリップボードにコピー CSS
ソースコードの解説
- スライドする画像の枚数によって、「anime_slider_fade」のパーセント配分を調整する必要があります
- サンプルコードでは3枚の画像をスライドしているため、100%を三等分した33.3%を区切りとしています
- 0%から15%の間にopacityで透過率を上げてふわっと表示、区切りとなる33.3%から48.3%の間に透過率を下げてふわっと消しています
- 2枚目の画像は、animation-delayで指定された時間差によって、1枚目の画像が消え始めた頃に表示し始めるという動きになります