style: solution彩色竖条加上下流动渐变动画
All checks were successful
continuous-integration/drone/push Build is passing

- 渐变色: 蓝→紫→粉→蓝 循环
- background-size: 300% 配合 background-position 动画
- 3s ease-in-out infinite 平滑流动
This commit is contained in:
yiqiu
2026-03-18 23:47:32 +08:00
parent 6f162b3fa1
commit cfb25d1282

View File

@@ -4472,7 +4472,7 @@ html {
position: relative; position: relative;
} }
/* 左侧装饰竖线 */ /* 左侧装饰竖线 — 渐变上下流动 */
.solution-text::before { .solution-text::before {
content: ''; content: '';
position: absolute; position: absolute;
@@ -4480,8 +4480,16 @@ html {
top: 20%; top: 20%;
height: 60%; height: 60%;
width: 3px; width: 3px;
background: linear-gradient(180deg, transparent, #38BDF8, rgba(99, 102, 241, 0.6), transparent); background: linear-gradient(180deg, transparent, #38BDF8, #6366F1, #EC4899, #38BDF8, transparent);
background-size: 100% 300%;
border-radius: 3px; border-radius: 3px;
animation: solutionBarFlow 3s ease-in-out infinite;
}
@keyframes solutionBarFlow {
0% { background-position: 0% 0%; }
50% { background-position: 0% 100%; }
100% { background-position: 0% 0%; }
} }
.solution-text h3 { .solution-text h3 {