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

brand-iconが井戸=>ふりかけになったり

Streamが揺れたり...

揺れる

iconを振動させる記法

code: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;

}

回る

code: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;

}

code:_with_usericon.css

/* style.cssと競合するので無効化した */

@keyframes icon-rotate {

0%{ transform: rotateX(0);}

100%{ transform: rotateX(360deg);}

}

.navbar .navbar-menu > li.stream-btn:hover,

code: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;

}