この記事は CSS Advent Calendar 2019 1日目の記事です。
アドベントカレンダーのイベントなので、「アドベントカレンダー × CSS」 の内容で書きます( ✌︎'ω')✌︎
そもそもアドベントカレンダーってなに
アドベントカレンダー (Advent calendar) は、クリスマスまでの期間に日数を数えるために使用されるカレンダーである。待降節の期間（イエス・キリストの降誕を待ち望む期間）に窓を毎日ひとつずつ開けていくカレンダーである。すべての窓を開け終わるとクリスマスを迎えたことになる。
『ウィキペディア日本語版』（2018年11月23日 (金) 09:37 UTC）
Qiitaのアドベントカレンダーに参戦している人ならご存知の方が多いと思いますが、アドベントカレンダーはクリスマス当日までのカウントダウンを楽しむものとして存在しています。サンタさーん！こっちですよー！！！
家庭のアドベントカレンダーは中身にお菓子が入っていることが多いらしいですね。私はやったことないのですが
CSSで作ってみた
クリスマスが待ち遠しいのでCSSでカレンダー作ってみました。見た目だけ！！！
画像は使っていません。
日付をクリックすると扉パカパカします。中身にプレゼントが入っています。
中身のプレゼントにカーソル当てるとゆらゆら揺れます。
※ スマホで見ると多少バグが発生するかもしれないですmm
See the Pen
CSS Advent Calendar by Deren (@deren2525)
on CodePen.
どう作ってるの
あまり綺麗なコードとは言えないのでせめてここだけでも...という部分を紹介します（させてください）
日付ボックス開けたり閉めたりしてる部分
チェックボックス乱用しています。
日付の扉をチェックボックスに紐づいた<label>の中に入れることで、扉をクリックすると開いたり閉じたりすることができます。
チェックボックス自体は、あると格好悪いので隠しています。
// クリック処理の部分のみ抜粋.box{// inputdisplay:none;&:checked{+label{.door{// 日付の扉transform:rotatey(-5deg)rotatex(85deg);}}}}HTML部分は下記。Pugで書いています。いつもお世話になっております。
ここって Pugのシンタックスハイライトつかないんですね、少し見辛い...
- for (var i = 1; i <= 25; i++) // 25日分
.advent-calendar__item
input.box(type="checkbox" name=`${i}` value=`${i}` id=`${i}`)
label(for=`${i}`)
.contents
// この中でプレゼントごにょごにょ作ってる
.door: span #{i} // 扉
ちなみに Pug→ HTMLに変換されると以下のようになります。25日分書くととても長いので1日分だけ
<divclass="advent-calendar__item"><inputclass="box"type="checkbox"name="1"value="1"id="1"><labelfor="1"><divclass="contents"><!-- この中でプレゼントごにょごにょ作ってる --></div><divclass="door"><span>1</span></div></label></div>なんか寂しいから雪を降らせる
なんか寂しかったのでCSSアニメーションで雪を振らせました。
2の倍数番目、3の倍数番目、4の倍数番目...てかんじで雪がバラバラ落ちてくれるようにしています。
アニメーション時間とかはめちゃくちゃに適当です。
// アニメーション部分のみ抜粋@mixinsnow-animation($duration,$delay){-webkit-animation:#{$duration}sease-in-out#{$delay}sinfinitesnowMove;animation:#{$duration}sease-in-out#{$delay}sinfinitesnowMove;}.snow-ball{@includesnow-animation(6,0);&:nth-of-type(2n){@includesnow-animation(5,2);}&:nth-of-type(3n){@includesnow-animation(5,1);}&:nth-of-type(4n){@includesnow-animation(5,3);}&:nth-of-type(5n){@includesnow-animation(5,5);}&:nth-of-type(6n){@includesnow-animation(5,4);}&:nth-of-type(7n){@includesnow-animation(6,2);}&:nth-of-type(8n){@includesnow-animation(6,3);}&:nth-of-type(9n){@includesnow-animation(6,1);}}@keyframessnowMove{0%{transform:translateY(-10px);}100%{transform:translateY(170px);}}ここもPugさんにだいぶお世話になっている気がする...
- for (var i = 0; i < 35; i++) // 雪の数
.snow-ball(style=`left: ${12*i}px;`)
おわり
CSSだけで作らないといけない理由は正直ない
サンタさーん！プレゼント待ってます！メリークリスマス〜〜