brand-iconをふりかけにするUserCSS
元の井戸のアイコンでもおもしろい動きになる

井戸が枯れたみたい
中途半端な座標でマウスホバーすると荒ぶるのは仕様
修正した

2024/10/14 17:25 荒ぶります

おそらく
> 2024-04-17 12:44:04 .project-name
も振動するようになって草
が関連します
これはこれで良いかなあという気持ち

ぶっちゃけこれ以上手間かけたくない
2024-05-02
14:41:40 nested CSSを使用
2024-02-23
不要と思われる記述を削除した
--furikake-low-left
は使われてたのでpreserveした

lintとformatをした
2024-04-17 12:44:04
.project-name
も振動するようになって草

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;
}
}