/villagepump/Streamボタンに動きを加えるUserCSS

generated at 10/17/2024, 2:53:12 AM
Streamボタンに動きを加えるUserCSS
右上の波々ボタンは何？
Streamにアクセスするボタンを表示するCSS

草
新しいページ作成ボタンがしいたけになったり
brand-iconが井戸=>ふりかけになったり
Streamが揺れたり...
次は検索バーorユーザーアイコンか..な？

揺れる
iconを振動させる記法
stylexx.css@keyframes icon-shake {
  0%     { transform:translate(0, 0) rotate(0); }
  16.66% { transform:translate(2px, -2px) rotate(-5deg); }
  33.32% { transform:translate(2px, 1px) rotate(5deg); }
  49.98% { transform:translate(0, 0) rotate(0); }
  66.64% { transform:translate(-2px, -2px) rotate(5deg); }
  83.30% { transform:translate(-2px, 3px) rotate(-5deg); }
  100%   { transform:translate(0, 0) rotate(0); }
}
.navbar .navbar-menu>li.stream-btn:hover,
.navbar .navbar-menu>li.stream-btn.hidden-xs:hover
{
  animation: 0.15s icon-shake linear infinite;
}

回る
iconを回転する記法
style.css@keyframes icon-rotate {
  0%{ transform: rotateX(0);}
  100%{ transform: rotateX(360deg);}
}
.navbar .navbar-menu>li.stream-btn:hover,
.navbar .navbar-menu>li.stream-btn.hidden-xs:hover
{
  animation: 1.5s icon-rotate linear infinite;
}

どうせならユーザーアイコンも一緒に回したい2020/12/28.iconMijinko_SD.icon
_with_usericon.css/* style.cssと競合するので無効化した */
@keyframes icon-rotate {
  0%{ transform: rotateX(0);}
  100%{ transform: rotateX(360deg);}
}
.navbar .navbar-menu > li.stream-btn:hover,
with_usericon.css.navbar .navbar-menu > li.stream-btn:hover ~ .dropdown .dropdown-toggle {
  /* Streamボタンをホバーした時は正回転 */
  animation: 1.5s icon-rotate linear infinite;
}
.navbar .navbar-menu:has(.dropdown:hover) > li.stream-btn,
.navbar .navbar-menu > .dropdown:hover .dropdown-toggle {
  /* ユーザーアイコンをホバーした時は逆回転 */
  animation: 1.5s icon-rotate linear reverse infinite;
}