css - Webkit 滚动条边框动画

Question

我想为我的滚动条提供发光效果。是否有任何网络工具包滚动条边框颜色选项？有人知道吗？

   ::-webkit-scrollbar {
    width: 12px;
}


/* Track */
::-webkit-scrollbar-track {
    border:1px solid #eee;
}


/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 0px;
    background: #aaaaaa; 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: #eee; 
}
::-webkit-scrollbar-thumb:hover{
    background: #cccccc;
}

Answer 1

这取决于你想要发光的元素，但是要在任何元素上获得“发光”，你可以使用 box-shadow 和 x y radius spread color 你可以如果你想忽略散布，如果你想让盒子阴影为黑色，则忽略颜色。

所以:

box-shadow: 0 0 1em 0 #000

等于:

box-shadow: 0 0 1em;

所以，如果你想让整个滚动条发光:

::-webkit-scrollbar {
  width: 12px;
  box-shadow: 0 0 1em #f00;
}

或者只有拇指:

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 0;
  background: #aaaaaa;
  box-shadow: 0 0 1em #f00;
}