brand-iconをふりかけにするUserCSS
https://gyazo.com/f65e29707b7c75050188071cd4d13cff
元の井戸のアイコンでもおもしろい動きになる suto3.icon
井戸が枯れたみたい
中途半端な座標でマウスホバーすると荒ぶるのは仕様
修正したMijinko_SD.icon
なんか安定版(笑)になってて笑ったwogikaze.icon
2024/10/14 17:25 荒ぶりますbsahd.icon
おそらく
2024-04-17 12:44:04 .project-nameも振動するようになって草takker.icon
が関連します
これはこれで良いかなあという気持ちMijinko_SD.icon
ぶっちゃけこれ以上手間かけたくない
2024-05-02
14:41:40 nested CSSを使用
2024-02-23
不要と思われる記述を削除した
--furikake-low-leftは使われてたのでpreserveしたtakker.icon
lintとformatをした
2024-04-17 12:44:04 .project-nameも振動するようになって草takker.icon
https://gyazo.com/fc1ecea15f647b5648f4fb2660b2857d
code:style.css
:root {
--furikake-high-bottom: 15px;
--furikake-high-left: -7px;
--furikake-low-left: -4px;
}
@keyframes brand-furikake {
0% {
margin: 0 0 0 var(--furikake-low-left);
transform: rotate(0deg);
}
25% {
margin: 0 0 var(--furikake-high-bottom) var(--furikake-high-left);
transform: rotate(150deg);
}
30.0% { margin: 0 0 var(--furikake-high-bottom) var(--furikake-high-left); }
36.7% { margin: 0 0 0 var(--furikake-low-left); }
43.3% { margin: 0 0 var(--furikake-high-bottom) var(--furikake-high-left); }
50.0% { margin: 0 0 0 var(--furikake-low-left); }
85% { transform: rotate(150deg); }
100% {
margin: 0 0 0 var(--furikake-low-left);
transform: rotate(0deg);
}
}
.navbar-brand {
.brand-icon {
animation-duration: 1.5s;
animation-timing-function: ease;
}
&:hover .brand-icon {
animation-name: brand-furikake;
}
}
Settings.icon
UserCSS.icon