iconを回転する記法
調べる時にこっちで調べたくなる
style.css@keyframes icon-rotate {
0%{ transform: rotate(0);}
100%{ transform: rotate(360deg);}
}
.deco-- img.icon {
animation: 1.5s icon-rotate linear infinite;
}
完全に
ネタで作ったので、旬が過ぎたら外してください
あまり意味のない派生だけれど、
逆回転とか...
使い方
アイコンを書く
アイコンを [- ]
で囲む
わかりにくいって?
ほい
視力検査の悪夢みたいだ
大きいのをゆっくり回したい
*
が奇数個の時はゆっくりで、偶数個の時ははやくなるようにしようかな
そういう仕様はわかりにくいのでは
みんな回転に真剣で良い
副作用としてアイコンを含む発言を取り消し線すると、アイコンが回る
ソース
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.iconchangeable-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);
}