generated at
brand-iconをふりかけにするUserCSS

あらかじめbrand-iconのサムネイルをふりかけにしておくMijinko_SD
元の井戸のアイコンでもおもしろい動きになる suto3
井戸が枯れたみたい
中途半端な座標でマウスホバーすると荒ぶるのは仕様
修正したMijinko_SD
なんか安定版(笑)になってて笑ったwogikaze.icon
2024/10/14 17:25 荒ぶりますbsahd
おそらく
> 2024-04-17 12:44:04 .project-name も振動するようになって草takker
が関連します
これはこれで良いかなあという気持ちMijinko_SD
ぶっちゃけこれ以上手間かけたくない

2024-05-02
14:41:40 nested CSSを使用
2024-02-23
不要と思われる記述を削除した
--furikake-low-left は使われてたのでpreserveしたtakker
lintとformatをした
2024-04-17 12:44:04 .project-name も振動するようになって草takker

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
UserCSS