Edited at

CSSだけでハロウィン気分の404ページ作った

前回アンパンマンをCSSでお絵描きしました。

CSSだけでお絵描き(CodePen)

今までCSSアニメーションをあまり使ったことがなく、使ってみたかったので

勉強がてら、CodePenで1つ作ってみました。

今回も記録用です。


ハロウィン気分の404

CSSで404ページを作りました。画像は使用してないです。

ページがないのはいたずらされたってことにすればいいじゃない...というコンセプトで

※スマホで見るとひどいのでオススメしないです( ;∀;)...

See the Pen CSS 404page Halloween by Deren (@deren2525) on CodePen.



CSSアニメーションを使用したところ

今回4つのモジュールにアニメーションを加えました。

全部シンプルです。

以下、アニメーション部分のみ抜粋したものを書きます。


コウモリ

コウモリの動きです。上下移動をループしています。


style.scss

.bat {

animation: bat 5s linear infinite alternate;
}

// コウモリの動き
@keyframes bat {
0% {
transform: translateY(0);
}

100% {
transform: translateY(-30px);
}
}


以下、コウモリの羽の動きです。少し回転をつけました。

右の羽と左の羽で分けています。


style.scss


.bat {
&__right-wing { // 右の羽
animation: bat 5s linear infinite alternate;
}
&__right-wing { // 左の羽
animation: bat 5s linear infinite alternate;
}
}

// 右の羽
@keyframes bat-right-wing {
0% {
transform: rotateZ(0);
}

100% {
transform: rotateZ(-20deg);
}
}

// 左の羽
@keyframes bat-left-wing {
0% {
transform: rotateZ(0);
}

100% {
transform: rotateZ(20deg);
}
}



おばけ

右左を行ったり来たりしています。ある程度進んだら折り返します。

びみょーーに上にも上がっています。わずかですが


style.scss

//おばけの動き

.ghost {
animation: ghost 20s linear infinite;
}

@keyframes ghost {
0% {
transform: translateX(0) rotateY(0);
}
45% {
transform: translateX(190px) translateY(20px) rotateY(0);
}
50% {
transform: translateX(200px) translateY(10px) rotateY(180deg);
}
95% {
transform: translateX(10px) translateY(10px) rotateY(180deg);
}
100% {
transform: translateX(0) rotateY(0);
}
}



館の窓

館の窓の色が微妙に変わるようにしています。


style.scss

$BG_WINDOW: #F6E833;

$BG_WINDOW_MODIFY: #F0DB90;

// 窓の色
.house {
&__window {
animation: window 3s linear infinite;
}
}

@keyframes window {
0% {
background-color: $BG_WINDOW;
}

100% {
background-color: $BG_WINDOW_MODIFY;
}
}



ゆらゆら揺らしました。3つの墓がバラバラに揺れるようにそれぞれに時間を変えています。


style.scss

.grave {

animation: grave 3s linear 3s infinite; // 大きい墓
&--mini {
animation: grave 2s linear 3s infinite; // 小さい墓
&:nth-of-type(2) {
animation: grave 3.5s linear 3s infinite; // 小さい墓2つ目
}
}
}

@keyframes grave {
0% {
transform: rotateZ(0);
}

25% {
transform: rotateZ(10deg);
}

50% {
transform: rotateZ(0);
}

100% {
transform: rotateZ(0);
}
}



所感

シンプルなアニメーションですが、シンプルでもなんか動いていると嬉しくなっちゃいますね。次は複雑なものにもチャレンジしたいです。

1日で作ったわりにはなかなかの出来で満足したのですが、ハロウィンはもうすぐ終わりますね。短い命。少し悲しい。

次はクリスマスでしょうか


追記(2018/11/01)

ハロウィンおわっちゃった!!!