UserCSS:雪が降る
SVGでアニメーションをする画像をつくる
その画像を背景に設定する
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/UserCSS:雪が降る/snow.svg
code:style.css
body {
background-image: url('https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/UserCSS:雪が降る/s25.svg');
}
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/UserCSS:雪が降る/s25.svg https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/UserCSS:雪が降る/s25.svg
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/UserCSS:雪が降る/s25.svg https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/UserCSS:雪が降る/s25.svg
窓っぽい効果になった
code:s25.svg
<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60">
<style type="text/css">
#snowflakes1{
animation: fallAnime 1s linear infinite;
}
#snowflakes2{
animation: fallAnime 0.5s linear infinite;
}
@keyframes fallAnime{
0% { transform: translateY(-100%)}
100% { transform: translateY(0%)}
}
</style>
<g id="snowflakes1" fill="snow">
<circle cx="1" cy="1" r="1" />
<circle cx="5" cy="25" r="1" />
<circle cx="11" cy="8" r="1" />
<circle cx="12" cy="25" r="1" />
<circle cx="17" cy="20" r="1" />
<circle cx="28" cy="45" r="1" />
<circle cx="33" cy="15" r="1" />
<circle cx="46" cy="11" r="1" />
<circle cx="58" cy="55" r="1" />
<circle cx="1" cy="61" r="1" />
<circle cx="5" cy="85" r="1" />
<circle cx="11" cy="68" r="1" />
<circle cx="12" cy="85" r="1" />
<circle cx="17" cy="80" r="1" />
<circle cx="28" cy="105" r="1" />
<circle cx="33" cy="75" r="1" />
<circle cx="46" cy="71" r="1" />
<circle cx="58" cy="115" r="1" />
</g>
<g id="snowflakes2" fill="snow">
<circle cx="3" cy="1" r="2" />
<circle cx="35" cy="25" r="2" />
<circle cx="11" cy="8" r="2" />
<circle cx="3" cy="61" r="2" />
<circle cx="35" cy="85" r="2" />
<circle cx="11" cy="68" r="2" />
</g>
</svg>
code:snow.svg
<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60">
<style type="text/css">
#snowflakes1{
animation: fallAnime 1s linear infinite;
}
#snowflakes2{
animation: fallAnime 0.5s linear infinite;
}
@keyframes fallAnime{
0% { transform: translateY(-100%)}
100% { transform: translateY(0%)}
}
</style>
<rect x="0" y="0" width="60" height="60" fill="gray" />
<g id="snowflakes1" fill="lightgray">
<circle cx="1" cy="1" r="1" />
<circle cx="5" cy="25" r="1" />
<circle cx="11" cy="8" r="1" />
<circle cx="12" cy="25" r="1" />
<circle cx="17" cy="20" r="1" />
<circle cx="28" cy="45" r="1" />
<circle cx="33" cy="15" r="1" />
<circle cx="46" cy="11" r="1" />
<circle cx="58" cy="55" r="1" />
<circle cx="1" cy="61" r="1" />
<circle cx="5" cy="85" r="1" />
<circle cx="11" cy="68" r="1" />
<circle cx="12" cy="85" r="1" />
<circle cx="17" cy="80" r="1" />
<circle cx="28" cy="105" r="1" />
<circle cx="33" cy="75" r="1" />
<circle cx="46" cy="71" r="1" />
<circle cx="58" cy="115" r="1" />
</g>
<g id="snowflakes2" fill="snow">
<circle cx="3" cy="1" r="2" />
<circle cx="35" cy="25" r="2" />
<circle cx="11" cy="8" r="2" />
<circle cx="3" cy="61" r="2" />
<circle cx="35" cy="85" r="2" />
<circle cx="11" cy="68" r="2" />
</g>
</svg>
UserCSS.icon