CSSでクリスマスカードを作ってみた
https://scrapbox.io/files/61b86723d0ca4e001dd9055d.png
こんにちは！もうすぐクリスマスですね🎄
CSSでクリスマスカードを作ってみましょう！
木をつくる
一昨年作成したツリーをベースに、擬似要素で装飾を加え、最上部には星をつけています。 星の形はclip-pathを使用したレイアウトにしています。
code:SCSS
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
https://scrapbox.io/files/61b86748097125001dde3501.png
雪だるまをつくる
顔・胴体部分はborder-radiusを使用し、丸を2つ重ねています。
胴体はborder-radiusのパーセンテージを調整し、少しいびつな感じを演出しています。
ネクタイの形づくりは上記同様、clip-pathを使用しています。
木の枝でできた手はCSSアニメーションで動かしています。
code:SCSS
animation: shakeHand 4s both infinite; //4秒かけてアニメーションを動かす
@keyframes shakeHand {
0%,100% {
transform: rotate(20deg);
}
50% {
transform: rotate(40deg);
}
}
https://scrapbox.io/files/61b86756d0ca4e001dd90834.png
テキストのアニメーション
フォントはGoogle FontのBungeeを使用しています。 ただ配置するだけでなく、CSSアニメーションを使用して1文字ずつスライドさせます。
Sassのfor文を使用して、9文字分のanimation-delayも1文字ずつ遅らせています。
code:SCSS
@for $i from 1 through 9 {
.p-title__merry span:nth-child(#{$i}) {
animation-delay: #{ $i * 0.1s}; }
.p-title__christmas span:nth-child(#{$i}) {
animation-delay: #{ 0.7 + $i * 0.1s}; }
}
雪を降らす
オプションで雪の大きさやスピードも調整できます。
また、特定の要素に積もらせたりオリジナルの画像を降らせたりもできるようです。
code:JS
$(document).ready(function(){
$(".js-snow").snowfall(
{
flakeCount : 80, //量
flakeIndex : "100", //z-index
minSize : 1, //最小サイズ
maxSize : 8, //最大サイズ
minSpeed : 1, //最小スピード
maxSpeed : 3, //最速スピード
round : true, //形を丸くするか
shadow : false, //影をつけるか
}
);
});
完成したものはこちら
https://scrapbox.io/files/61b86723d0ca4e001dd9055d.png
ぜひ、アニメーションも一緒に見てみてください！
※PC推奨
みなさんもぜひ、CSSでクリスマスカードを作ってみてください！
参考にしたサイト
/icons/hr.icon
明日はVtuber徳山さんです！