cssで作るコンビニ自動ドア

少し前にはてブに上がっていた

www.magical-girl.site

の人がとても素晴らしかったので、自分もcssを使ってもっと遊ぶべく、これから何かを作っていくことにした。

世の中の「動くもの」を探す

まずは何を作ろうか。

とりあえず、止まったものより「動くもの」が良いな。

そう考えながら数日過ごして目に付いたのは「コンビニの自動ドア」だった。

非常に手軽っぽいけど、どうやって表現するかは自分次第。

とりあえず作る

制限時間は20分。と思ったけど間に合わず35分かかった。

動くところは、ドアにカーソルを乗せると開くだけです。

codepen.io

思ったこと

• グラデーションを少し入れると「光っている」感じの表現になる
• コンビニは通常ガラス張りのため、壁が灰色なのは本当はおかしい
• ドアが開くなら中に何か無いと寂しい
• transitionのeaseは結構万能かも
• 色選択のスキルが欲しい

さいごに

1日30分でも良いから何かを作る・・・という癖をつけたい。

以前からずっと、そう言っている気がした