iconを回転する記法
調べる時にこっちで調べたくなる
code: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.icon あまり意味のない派生だけれど、逆回転とか...hatori.icon 使い方
アイコンを書く
deno.icon
アイコンを[- ]で囲む
deno.icon
わかりにくいって？Mijinko_SD.icon
ほい
deno.icon
Settings.iconSettings そうか、こんなふうに使うのかsuto3.icon ためしに、*の数によって速度が変わるようにしてみたMijinko_SD.icon
https://gyazo.com/56a33d1fb5aa97eb4d4de51f15453913
視力検査の悪夢みたいだcFQ2f7LRuLYP.icon
大きいのをゆっくり回したい 増井俊之.icon
*が奇数個の時はゆっくりで、偶数個の時ははやくなるようにしようかなMijinko_SD.icon
そういう仕様はわかりにくいのでは 増井俊之.icon
みんな回転に真剣で良いmtane0412.iconnishio.icon
副作用としてアイコンを含む発言を取り消し線すると、アイコンが回るinajob.icon こういうinajob.icon感じ
ソース
code: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); }
回転速度をそのままにしてサイズだけ変えられるようにした[**********- [Summer498.icon]]Summer498.icon
順番を変えると回転速度が変わる [-********** [Summer498.icon]]Summer498.icon
code: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.icon
UserCSS.icon