CSS アニメーションを使って背景画像をループで動かす

CSSで背景画像を動かすにはanimationを利用してbackground-poistionの位置を動かすシンプルな方法で実装できます。

See the Pen
Untitled by kura (@kuranopen)
on CodePen.

CSS

CSSを背景に指定します。

body {
  background-image: url(https://source.unsplash.com/2s9aHF4eCjI/360x360); /* image url*/
  background-size: 360px 360px; /* image size */
  animation: bg 10s infinite linear;
}
@keyframes bg {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 360px -360px;
  }
}

• background-imageに動かす画像のパス・URLを指定します
• background-sizeと、animationのbackground-positionに画像のサイズを指定すれば完成です

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選