JavaScriptを使わずにCSSだけで背景画像を切り替えるコード。
@keyframes で枚数別に画像を切り替える%設定に苦労したので備忘録に書いておきます。
HTML
縦横比が違う画像を使ってもキレイに並ぶようにobject-fit:coverを使用してます。
参考：【CSS / object-fit】動画や画像の縦横比を保ったままトリミングする
<div class="top">
<div class="bg_container bg">
<img class="image object-fit-img" src="img/img01.jpg" />
<img class="image object-fit-img" src="img/img02.jpg" />
<img class="image object-fit-img" src="img/img03.jpg" />
</div>
</div>CSS
.object-fit-img {object-fit: cover;object-position: bottom;font-family: 'object-fit: cover; object-position: bottom;'}
.top {position: relative;}
.bg_container {position: relative;width:100%;max-width: 100%; height: 100vh; }
.bg_container .image {position: absolute;width: 100%; height: 100vh; opacity: 0;animation: change-img-anim 9s infinite;}
.bg_container .image:nth-of-type(1) {animation-delay: 0s;}
.bg_container .image:nth-of-type(2) {animation-delay:3s;}
.bg_container .image:nth-of-type(3) {animation-delay: 6s;}
@keyframes change-img-anim {
0%{ opacity: 0;}
20%{ opacity: 1;}
33%{ opacity: 1;}
63%{ opacity: 0;}
100%{ opacity: 0;}
}「animation: change-img-anim 9s infinite; 」は「切り替え間隔（例：3秒）× 画像の枚数（例：3枚）」の値（例：9s）に書き換える
画像枚数別のパーセンテージ(この表便利)
keyframesの枚数別パーセンテージ。
| 値 | 画像２枚 | 画像３枚 | 画像４枚 | 画像５枚 |
| opacity: 0; | ０％ | ０％ | ０％ | ０％ |
| opacity: 1; | 25 ％ | 20 ％ | 15 ％ | 10 ％ |
| opacity: 1; | 50 ％ | 33 ％ | 25 ％ | 20 ％ |
| opacity: 0; | 75 ％ | 63 ％ | 40 ％ | 30 ％ |
| opacity: 0; | 100 ％ | 100 ％ | 100 ％ | 100 ％ |
応援クリックよろしくお願いします！
