フリーランスwebデザイナーのwebデザインブログ

ちいさなwebデザインブログCHIIWEB BLOG

【css】アニメーションで星をキラキラ(点滅)させる

点滅させるアニメーション

cssのアニメーションを使って、星をキラキラさせてみます。

この記事を書いている人

Marie

Marie

  • フリーランスwebデザイナー&講師
  • 2児ママ
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
もっと詳しくみる

星をテーマにするので、この記事の背景を暗くしてみました。

暗い背景に、白いものがあると目立ちますねわたし

星画像を点滅させると、キラキラしているっぽく見えます。star

cssで点滅するアニメーション

まずは、点滅させる画像を用意してください。

<figure class="star"><img src="img/star.png" alt=""></figure>

src=”画像URL” ←srcは画像のURLを指定してくださいね。

imgタグにaltは必須です。

空にする場合もaltは付けておいてください。

点滅=不透明度を変更する

点滅しているように見せたい場合は、不透明度を変更したらOKです。

.star {
	animation: flashing 4s infinite;
}
@keyframes flashing {
	0% {
		opacity: 1;
	}
	90% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
animation: flashing 4s infinite;

flashingというアニメーションを4秒間かけて行ってそれを繰り返してくださいね」という書き方です。

アニメーションの内容を[@keyframes]で指定します。

分かりやすいので0%〜100%を私はよく使います。

opacityは不透明度です。

不透明度を0から100に変化させるアニメを繰り返し行うと、このような点滅になります。

秒数を変えたり、アニメーション内の%を変更したりして、色々試してみてください。

好きな点滅の感じに調整してみてくださいね。

広範囲で星をキラキラさせるアイデア

この考え方を利用して、もっと広範囲でキラキラさせたいけど、1つずつ指定するのは面倒やな

という私と同じようなズボラさん用に、用意してみました。

背景画像を使う

こんな感じの星空を実装してみます。

星の画像を1つ用意します。

用意したのはこのような画像です↓

星空

星空の写真の背景部分を自動選択でざっくり削除し、星のみにした画像です。

この画像を2枚重ねて配置し、1つを左右反転させています。

(今回は画像1枚にしましたが、2枚用意してもOKですちゅ

それぞれの不透明度をアニメーションで動かし、キラキラしているように見せていますstar

<div class="star-flashing"></div>
.star-flashing {
	width: 100%;
	height: 100vh;
	background-color: #0D0630;
	position: relative;
}
.star-flashing::before,
.star-flashing::after {
	width: 100%;
	height: 100%;
	content: "";
	background-image: url('star-flashing.png');
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.star-flashing::before {
	animation: star-flashing-before 10s infinite;
	opacity: 1;
}
@keyframes star-flashing-before {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
	90% {
		opacity: 0;
	}
	95% {
		opacity: 1;
	}
}
.star-flashing::after {
	transform: scaleX(-1);
	animation: star-flashing-after 10s infinite;
}
@keyframes star-flashing-after {
	0% {
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
	70% {
		opacity: 0
	}
	80% {
		opacity: 1;
	}
	85% {
		opacity: .3;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

transform: scaleX(-1);を使って画像を左右反転させています。

animationの”%”や秒数、opacityの値をカスタマイズして、色々試してみてくださいねプロフィールイラスト


コメントを残す

CAPTCHA


コメントは承認後に表示されます。

ドメインとサーバーはエックスサーバーで一括管理が便利♪

ドメイン取得↓

サーバー契約↓

合わせて読んでほしい記事

関連記事