UserCSS:桜吹雪

SVGでアニメーションをする画像をつくる

その画像を背景に設定する

code:style.css

body {

}

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/UserCSS:桜吹雪/s01.svg

窓っぽい効果になった

code:s01.svg

<style type="text/css">

animation: fallAnime 17s linear infinite;

}

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>

UserCSS.icon