こんばんは！DIT井上で～～～～～～～～～～～～～～～～す！！！！！！！！！！！
長い。
今日挨拶が長かった理由は・・・・・。
何となくです。
おもんな。
😅😅😅😅😅😅😅😅😅😅
今日はですね、タイトルにあるようにクリスマス特集のコード解説！みなさんも、
この季節なのでブログに雪を降らせてみてはいかがでしょうか？
☑ブログに雪を降らせてみたい人
☑ブログを装飾してみたい人
☑雪が大好きなブロガーさん
HTML
まずは、それぞれのHTMLをご紹介します。
<style>
@keyframes kaiten1{
0%{transform:rotateY(0deg) rotateZ(0deg);}
100%{transform:rotateY(360deg) rotateZ(360deg);}
}
@keyframes kaiten2{
0%{transform:rotateY(120deg) rotateZ(120deg);}
100%{transform:rotateY(480deg) rotateZ(480deg);}
}
@keyframes kaiten3{
0%{transform:rotateY(240deg) rotateZ(240deg);}
100%{transform:rotateY(600deg) rotateZ(600deg);}
}
#fullscr{
position:fixed;
width:100%;height:100%;
top:0px;left:0px;
overflow:hidden;
transform-style:preserve-3d;
z-index:200;
pointer-events: none;
}
#scr1,#scr2,#scr3{
position:absolute;
top:-50%;left:-50%;
width:200%;height:200%;
background-image:
radial-gradient(#ffffff40 2%,#ffffff00 6%)
,radial-gradient(#ffffff80 0%,#ffffff00 5%);
background-position:0px 0px,200px 200px;
background-size:400px 400px,300px 300px;
}
#scr1{animation:kaiten1 20s linear infinite;}
#scr2{animation:kaiten2 20s linear infinite;}
#scr3{animation:kaiten3 20s linear infinite;}
</style>
<div id="fullscr">
<div id="scr1"></div>
<div id="scr2"></div>
<div id="scr3"></div>
</div>
こんな感じになります。正直、コードに自信がある人でなければ、あまりいじらない
方が良いと思いますよ？
このコードは、タグの天才、LSS id:little_strangeさんの記事を参考にしました。
う～ん、大掃除の埃・・・見えなくはないかな・・・（笑）冗談っす！
ちなみに、miyako id:m421miyakoさんがこのHTMLを使ってましたよ。この2人の
記事も見てみてくださいね。僕の説明だったら失敗の可能性。
貼り付け作業
貼り付け作業を説明します。
これで完成です！！
最後に
今日の記事の振り返り、次回予告、DIT恐竜研究室、カクヨムの情報です。
今回は、クリスマス特集で使った雪のCSSの解説をしました。もし、背景が白で
分かりにくかったら、miyakoさんの記事を参考にしてください。
それじゃ、今日はこのへんで！最後まで読んでくれてありがとうございました。
