時期が時期なのでハロウィーン仕様の404ページを作ってみた

期間限定だが、404ページをハロウィーン仕様にしてみました。
ページを読み込んだら、1秒かけてカボチャの口が開いて、メッセージ「404 File not found.」が表示されるというアニメーションです。

右上の「EDIT ON CODEPEN」のロゴをクリックすると、記事に埋め込まれているコードが画面いっぱいに表示されるページに遷移します。

See the Pen Untitled by haruyosih (@lvn_HO) on CodePen.

口が開くカボチャのパーツを上顎 div id="upper" 、下顎 div id="lower" 、頬 div id="cheek" の3つのパーツに分け、この3つのパーツを包含するブロックを div id="pumpkin" としました。さらにこの中にメッセージ用テキストも内包しています。

<div id="pumpkin">
<div id="upper"></div>
<div id="lower"></div>
<div id="cheek"></div>
<div id="message"><span>404</span>File not found.</div>
</div> 

① cssでのレイアウトは div id="pumpkin" を基準（ position:relative; ）として、「上顎」「頬」「下顎」を絶対配置 position:absolute; で配置します。

②はじめは上顎は閉まっている状態です。上顎の高さは294pxで、口が開いた状態にするにはtop: -294px;（要素の高さ分だけ上にあげる）、口を閉じた状態の時には100px下に配置したいのでtop: -194px;とします。この状態で始まり、1秒かけて上に100px移動させるのでアニメーションのcssは以下のようにします。

@keyframes upper {
    0% { 
		top: -194px;
    }
    100% {
		top: -294px;
    }
  }

③下顎は div id="lower" はheight: 112pxで、
ページ読み込み後、1秒かかて112px下に移動させるのでアニメーションのcssは以下のようにします。

@keyframes lower {
    0% { 
		bottom: 0px;
    }
    100% {
		bottom: -112px;
    }
  }

④頬 div id="cheek" は初めは見えない状態にしておきたいので初期値は height: 0 　、で1秒かけて200pxの高さに変型させます。
その際、基準点が左上になり、上から下に 200px 伸びる動きになります。真ん中がから上と下に 100px ずつ広がってほしいので position:100px （上下真中の位置）として、このブロックの高さ（200px）の半分（100px）の高さにしておきます。
アニメーションのcssは以下のようにします。

@keyframes cheek {
    0% { 
		height:0px;
		opacity: 1;
		top: 100px;
    }
    100% {
		height:200px;
		opacity: 1;
		top: 0;
    }
 }

⑤404メッセージもブラーをつけてフェードインで表示されるアニメーションにしました。
HTMLは

<div id="message"><span>404</span>File not found.</div></div>

cssで blurFadeIn というアニメーションネームをつけて、ページを読み込んでから3秒後に3秒かけて文字をフェードインさせます。

#message {
　animation: blurFadeIn 3s ease 3s 1 forwards;
　opacity: 0;
}

@-webkit-keyframes blurFadeIn{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(1.3);
	}
	50%{
		opacity: 0.5;
		text-shadow: 0px 0px 10px #fff;
		transform: scale(1.1);
	}
	100%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
	}
}

こうするとページ読み込み後、上下の顎が開いて口の中 div id="cheek" が見えて、更にテキストアニメーションで404メッセージが表示されます。