どうも7noteです。jsを使わずに画像の切り替えを実装する方法

複数の画像を一定時間で切替えたりするにはbxsliderなどの既存のjavascriptを読み込んで作成することが多いです。ですが、jsをつかわずに画像を切り替える方法を紹介。

複数の画像を自動で切り替える方法

index.html

<div class="box"></div>

style.css

.box {
  width: 200px;  /* 横幅を200pxに指定 */
  height: 200px; /* 高さを200pxに指定 */
  animation: image_anime 5s ease infinite; /* 5秒のアニメーションを繰り返す */
}
@keyframes image_anime {
  0% {
    background-image: url(photo01.jpg); /* 背景画像1を指定 */
  }
  50% {
    background-image: url(photo02.jpg); /* 背景画像2を指定 */
  }
  100% {
    background-image: url(photo01.jpg); /* 背景画像1を指定 */
  }
}

まとめ

あまりこだわらず、ずっと背景を入れ替えるのを繰り返すだけならこのようなCSSだけでアニメーションを書くことができます。

jsを使う必要のないところは、使わずに済む方が簡単で良いですね。
でもこの方法だと画像ごとにaタグは設置できないので注意！

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ