style: solution彩色竖条加上下流动渐变动画
All checks were successful
continuous-integration/drone/push Build is passing
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:
@@ -4472,7 +4472,7 @@ html {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 左侧装饰竖线 */
|
||||
/* 左侧装饰竖线 — 渐变上下流动 */
|
||||
.solution-text::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -4480,8 +4480,16 @@ html {
|
||||
top: 20%;
|
||||
height: 60%;
|
||||
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;
|
||||
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 {
|
||||
|
||||
Reference in New Issue
Block a user