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;
|
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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user