渐变色滚动条

 1/* 来源于 packages\theme-chalk\src\vp-plus\scrollbar.scss 进行二次美化后的效果 */
 2/* 全局滚动条样式 */
 3::-webkit-scrollbar {
 4  width: 0.35rem;
 5  height: 0.35rem;
 6}
 7
 8::-webkit-scrollbar-track {
 9  border-radius: 2em;
10  background: transparent;
11}
12
13@keyframes scrollbar-glow {
14  0% {
15    background-position: 0% 50%;
16  }
17  100% {
18    background-position: 200% 50%;
19  }
20}
21
22/* 滚动条滑块样式 🌅亮色模式 */
23html:not(.dark) ::-webkit-scrollbar-thumb {
24  background: linear-gradient(
25    120deg,
26    /* 可自定义配置颜色 */
27    rgba(51, 255, 204, 1),
28    rgba(255, 255, 255, 0.8),/* 过渡色 */
29    rgba(255, 91, 91, 1),
30    rgba(255, 255, 255, 0.8),/* 过渡色 */
31    rgba(102, 174, 255, 1),
32    rgba(51, 255, 204, 1)
33  );
34  background-size: 200% 200%;
35  animation: scrollbar-glow 3s linear infinite alternate;
36  border-radius: 2em;
37  background-clip: padding-box;
38}
39
40/* 悬停 🌅亮色模式 */
41html:not(.dark) ::-webkit-scrollbar-thumb:hover {
42  background: linear-gradient(
43    120deg,
44    /* 可自定义配置颜色 */
45    rgba(255, 91, 91, 0.9),
46    rgba(255, 255, 255, 0.9),/* 过渡色 */
47    rgba(91, 255, 214, 0.9),
48    rgba(255, 255, 255, 0.9),/* 过渡色 */
49    rgba(51, 92, 255, 0.9),
50    rgba(255, 91, 91, 0.9)
51  );
52  background-size: 200% 200%;
53  animation: scrollbar-glow 2s linear infinite alternate;
54  border-radius: 2em;
55  background-clip: padding-box;
56}
57
58/* 滚动条滑块样式 🌆暗色模式） */
59html.dark ::-webkit-scrollbar-thumb {
60  background: linear-gradient(
61    120deg,
62    /* 可自定义配置颜色 */ 
63    rgba(0, 255, 180, 1),
64    rgba(255, 255, 255, 0.7),/* 过渡色 */ 
65    rgba(255, 80, 160, 1),
66    rgba(255, 255, 255, 0.7),/* 过渡色 */ 
67    rgba(120, 100, 255, 1),
68    rgba(0, 255, 180, 1)
69  );
70  background-size: 200% 200%;
71  animation: scrollbar-glow 3s linear infinite alternate;
72  border-radius: 2em;
73  background-clip: padding-box;
74}
75
76/* 悬停 🌆暗色模式 */
77html.dark ::-webkit-scrollbar-thumb:hover {
78  background: linear-gradient(
79    120deg,
80    /* 可自定义配置颜色 */
81     rgba(0, 255, 180, 0.9),
82    rgba(255, 255, 255, 0.9),/* 过渡色 */ 
83    rgba(255, 80, 160, 0.9),
84    rgba(255, 255, 255, 0.9),/* 过渡色 */ 
85    rgba(160, 120, 255, 0.9),
86    rgba(0, 255, 180, 0.9)
87  );
88  background-size: 200% 200%;
89  animation: scrollbar-glow 2s linear infinite alternate;
90  border-radius: 2em;
91  background-clip: padding-box;
92}

1@use "./scrollbar-2.scss"; // 滚动条样式-2,渐变色滚动条