Posted at

CSSアニメーションと背景画像で空に雲を流す


実現したいこと


  • 上図のような雲が浮かぶ空を作りたい。

  • 雲はアニメーションで流れてほしい。

  • 空の色はCSSで変えたい。


実装方法

以下のような雲の画像を用意します。(黒は透過チャンネルです。)

スタイルシートを作成します。

/* 1. 雲が浮かぶ空を作成 */

.sky {
animation: cloud 25s linear infinite;
background: url(../images/cloud.png),
linear-gradient(#bbe4fa, hsl(171, 40%, 91%));
background-position-x: 0%;
background-position-y: 35%;
background-repeat: repeat-x;
background-size: 800px auto;
height: 560px;
}
/* 2. keyframeを使って、雲が流れるように。 */
@keyframes cloud {
from {
background-position-x: 0;
}
to {
background-position-x: 800px;
}
}


  1. 画像とグラデーションを背景に敷いて雲が浮かぶ空を作成。

  2. 雲の背景画像をアニメーションで横に移動させる。

linear-gradientの色を変更すれば、夕方の空とかも作成できます。

簡単なので、みなさんぜひやってみてください。