UserCSS:桜吹雪
SVGでアニメーションをする画像をつくる
その画像を背景に設定する
style.cssbody {
background-image: url('https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/UserCSS:桜吹雪/s01.svg');
}
窓っぽい効果になった
s01.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">
#shower1{
animation: fallAnime 17s linear infinite;
}
#shower2{
animation: fallAnime 5s linear infinite;
}
@keyframes fallAnime{
0% { transform: translateY(-100%)}
100% { transform: translateY(0%)}
}
</style>
<g id="shower1" fill="pink">
<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="shower2" fill="lightpink">
<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>