一个简单的Boost动画
- 内容介绍
- 文章标签
- 相关推荐
安装 Stylus 扩展，然后为linux.do域名添加以下代码：
/* linux.do Boost 动画 */
.discourse-boosts__bubble {
animation: slideText 8s linear infinite;
}
.discourse-boosts__bubble:hover{
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
@keyframes slideText {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-50%);
}
50% {
transform: translateX(-100%);
}
75% {
transform: translateX(-50%);
}
100% {
transform: translateX(0);
}
}
灵感来源：感觉boost好像弹幕啊 - 搞七捻三 - LINUX DO
网友解答：--【壹】--：
这个动画还怪费电的，不开这个我笔记本功耗6-8W，开了9-12W了
--【贰】--：
大佬牛逼！再加一个鼠标悬停元素提到最上层显示
安装 Stylus 扩展，然后为linux.do域名添加以下代码：
/* linux.do Boost 动画 */
.discourse-boosts__bubble {
animation: slideText 8s linear infinite;
}
.discourse-boosts__bubble:hover{
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
@keyframes slideText {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-50%);
}
50% {
transform: translateX(-100%);
}
75% {
transform: translateX(-50%);
}
100% {
transform: translateX(0);
}
}
灵感来源：感觉boost好像弹幕啊 - 搞七捻三 - LINUX DO
网友解答：--【壹】--：
这个动画还怪费电的，不开这个我笔记本功耗6-8W，开了9-12W了
--【贰】--：
大佬牛逼！再加一个鼠标悬停元素提到最上层显示