feat: 鲁迅体悟场景1、场景2
This commit is contained in:
1 parent
dd1cabfb87
commit
3611a0857a
7 files changed
+680
-281
No files matched your search
@@ -151,3 +151,76 @@ button:not([disabled]){
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 鲁迅页面滚动条样式 - 古典文化风格 */
|
||||
.luxun-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(212, 175, 55, 0.85) rgba(250, 245, 235, 0.08);
|
||||
}
|
||||
|
||||
.luxun-scrollbar::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.luxun-scrollbar::-webkit-scrollbar-track {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(250, 245, 235, 0.06),
|
||||
rgba(240, 235, 225, 0.04)
|
||||
);
|
||||
border-radius: 12px;
|
||||
border: 1.5px solid rgba(139, 115, 71, 0.2);
|
||||
margin: 6px 2px;
|
||||
box-shadow:
|
||||
inset 0 0 8px rgba(139, 115, 71, 0.08),
|
||||
inset 0 0 2px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.luxun-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(240, 190, 117, 0.95),
|
||||
rgba(212, 175, 55, 0.95),
|
||||
rgba(184, 134, 11, 0.95)
|
||||
);
|
||||
border-radius: 12px;
|
||||
border: 2px solid rgba(250, 245, 235, 0.4);
|
||||
box-shadow:
|
||||
inset 0 1px 3px rgba(255, 255, 255, 0.25),
|
||||
inset 0 -1px 2px rgba(139, 115, 71, 0.2),
|
||||
0 2px 6px rgba(139, 115, 71, 0.25),
|
||||
0 0 10px rgba(212, 175, 55, 0.15);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 滚动条滑块内部装饰线效果 */
|
||||
.luxun-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 215, 140, 1),
|
||||
rgba(240, 190, 117, 1),
|
||||
rgba(212, 175, 55, 1)
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 1px 4px rgba(255, 255, 255, 0.35),
|
||||
inset 0 -1px 3px rgba(139, 115, 71, 0.25),
|
||||
0 3px 8px rgba(139, 115, 71, 0.35),
|
||||
0 0 14px rgba(212, 175, 55, 0.3);
|
||||
border-color: rgba(250, 245, 235, 0.6);
|
||||
transform: scaleX(1.05);
|
||||
}
|
||||
|
||||
.luxun-scrollbar::-webkit-scrollbar-thumb:active {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(184, 134, 11, 1),
|
||||
rgba(139, 115, 71, 1),
|
||||
rgba(107, 93, 71, 1)
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 2px 5px rgba(0, 0, 0, 0.4),
|
||||
inset 0 -1px 2px rgba(139, 115, 71, 0.3),
|
||||
0 1px 3px rgba(139, 115, 71, 0.3);
|
||||
border-color: rgba(250, 245, 235, 0.2);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user