LINEを開くとたまに画面に雪が降ってきたり、桜の花びらが降ってきたり、ちょっとほっこりする時ってありますよね。
そういうのっていろんな方法がありますが、下記のようにCSSの「animation プロパティ」だけで簡単に実現することができます。
今は、ノーコード云々・・・と言われていますが、自分であれこれ調べていじって設定して動くと楽しい。
CSSだけでも奥が深いのです。
【HTML】
<div class="snow">●</div>
【CSS】
body{
background: #000;
}
.snow {
color: snow;
font-size: 8px;
position: fixed;
text-shadow:3vw -100px 1px, 10vw -200px 3px, 15vw -700px 4px, 20vw -500px 7px, 25vw -500px 2px, 30vw -300px 1px, 36vw -400px 2px, 40vw -150px 6px, 47vw -840px 2px, 50vw -300px 5px,60vw -200px 3px, 68vw -100px 5px, 70vw -250px 1px, 80vw -620px 9px, 90vw -800px 4px;
animation: snow 5s linear infinite;
}
＠keyframes snow {
0% {
top: 0;
}
100% {
top: 100%;
}
}
※＠keyframes snowの「@」は半角
