generated at
iconを回転する記法
調べる時にこっちで調べたくなる
style.css
@keyframes icon-rotate { 0%{ transform: rotate(0);} 100%{ transform: rotate(360deg);} } .deco-- img.icon { animation: 1.5s icon-rotate linear infinite; }

完全にネタで作ったので、旬が過ぎたら外してくださいMijinko_SD
2023/01/23 これ作ったのお前だったのか…Mijinko_SD
時計回り/右回りに回転する
あまり意味のない派生だけれど、逆回転とか...hatori

使い方
アイコンを書く
deno
アイコンを [- ] で囲む
わかりにくいって?Mijinko_SD
ほい


Settings.iconSettings そうか、こんなふうに使うのかsuto3.icon

ためしに、 * の数によって速度が変わるようにしてみたMijinko_SD.icon
視力検査の悪夢みたいだcFQ2f7LRuLYP
大きいのをゆっくり回したい 増井俊之
* が奇数個の時はゆっくりで、偶数個の時ははやくなるようにしようかなMijinko_SD
そういう仕様はわかりにくいのでは 増井俊之
みんな回転に真剣で良いmtane0412nishio
副作用としてアイコンを含む発言を取り消し線すると、アイコンが回るinajob
こういうinajob.icon感じ
ソース
changeable.css
@keyframes icon-rotate { 0%{ transform: rotate(0);} 100%{ transform: rotate(360deg);} } body { --icon-ratate-animation: icon-rotate linear infinite; } .deco-- img.icon { animation: 1.5s var(--icon-ratate-animation); } .level-1 [class="deco-- deco-\*"] img.icon { animation: 3s var(--icon-ratate-animation); } .level-2 [class="deco-- deco-\*"] img.icon { animation: 1.5s var(--icon-ratate-animation); } .level-3 [class="deco-- deco-\*"] img.icon { animation: 1s var(--icon-ratate-animation); } .level-4 [class="deco-- deco-\*"] img.icon { animation: 0.7s var(--icon-ratate-animation); } .level-5 [class="deco-- deco-\*"] img.icon { animation: 0.4s var(--icon-ratate-animation); } .level-6 [class="deco-- deco-\*"] img.icon { animation: 0.3s var(--icon-ratate-animation); } .level-7 [class="deco-- deco-\*"] img.icon { animation: 0.2s var(--icon-ratate-animation); } .level-8 [class="deco-- deco-\*"] img.icon { animation: 0.1s var(--icon-ratate-animation); } .level-9 [class="deco-- deco-\*"] img.icon { animation: 0.07s var(--icon-ratate-animation); } .level-10 [class="deco-- deco-\*"] img.icon { animation: 0.05s var(--icon-ratate-animation); }
回転速度をそのままにしてサイズだけ変えられるようにした [**********- [Summer498.icon]] Summer498.icon
順番を変えると回転速度が変わる [-********** [Summer498.icon]] Summer498.icon
changeable-old.css
@keyframes icon-rotate { 0%{ transform: rotate(0);} 100%{ transform: rotate(360deg);} } body { --icon-ratate-animation: icon-rotate linear infinite; } .deco-- img.icon { animation: 1.5s var(--icon-ratate-animation); } .level-1 .deco-- img.icon { animation: 3s var(--icon-ratate-animation); } .level-2 .deco-- img.icon { animation: 1.5s var(--icon-ratate-animation); } .level-3 .deco-- img.icon { animation: 1s var(--icon-ratate-animation); } .level-4 .deco-- img.icon { animation: 0.7s var(--icon-ratate-animation); } .level-5 .deco-- img.icon { animation: 0.4s var(--icon-ratate-animation); } .level-6 .deco-- img.icon { animation: 0.3s var(--icon-ratate-animation); } .level-7 .deco-- img.icon { animation: 0.2s var(--icon-ratate-animation); } .level-8 .deco-- img.icon { animation: 0.1s var(--icon-ratate-animation); } .level-9 .deco-- img.icon { animation: 0.07s var(--icon-ratate-animation); } .level-10 .deco-- img.icon { animation: 0.05s var(--icon-ratate-animation); }

Settings
UserCSS