/villagepump/iconを回転する記法

generated at 11/17/2024, 5:02:15 AM
iconを回転する記法
アイコンを回転する記法
調べる時にこっちで調べたくなる
style.css@keyframes icon-rotate {
  0%{ transform: rotate(0);}
  100%{ transform: rotate(360deg);}
}
.deco-- img.icon {
  animation: 1.5s icon-rotate linear infinite;
}

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

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


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

ためしに、 * の数によって速度が変わるようにしてみたMijinko_SD.icon
視力検査の悪夢みたいだ
ゲッダン
大きいのをゆっくり回したい 
 * が奇数個の時はゆっくりで、偶数個の時ははやくなるようにしようかな
そういう仕様はわかりにくいのでは 
みんな回転に真剣で良い
副作用としてアイコンを含む発言を取り消し線すると、アイコンが回る
こういう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);
}

#アイコン記法 #UserCSS
#回転