fix(ui): update halo image version and enhance header styles with animations

这个提交包含在:
rohow
2026-01-28 15:56:25 +08:00
未验证
父节点 244a7fa1a7
当前提交 9fa32cdd5a
修改 3 个文件,包含 91 行新增4 行删除
+86 -1
查看文件
@@ -13,10 +13,95 @@
.dividing {
flex: 1;
background: repeating-linear-gradient(90deg, var(--foreground), var(--foreground) 2px, transparent 0, transparent 10px);
display: block;
width: 100%;
height: 25px;
position: relative;
// 虚线背景层 - 带遮罩
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
90deg,
var(--foreground),
var(--foreground) 2px,
transparent 0,
transparent 10px
);
background-size: 10px 100%;
animation: line-flow 3s linear infinite;
// 遮罩层实现虚线淡入淡出效果
mask-image: linear-gradient(
90deg,
transparent 0%,
black 3%,
black 97%,
transparent 100%
);
-webkit-mask-image: linear-gradient(
90deg,
transparent 0%,
black 3%,
black 97%,
transparent 100%
);
}
// 扫描光效 - 模拟终端扫描线
&::after {
content: '';
position: absolute;
left: -30%;
top: 50%;
transform: translateY(-50%);
width: 30%;
height: 120%;
filter: blur(4px);
background: linear-gradient(
90deg,
transparent 0%,
var(--green) 80%,
transparent 100%
);
opacity: 0.3;
animation: scan-line 5s ease-in-out infinite;
pointer-events: none;
z-index: 10;
}
}
// 虚线流动动画 - 模拟加载进度
@keyframes line-flow {
0% {
background-position: 0 0;
}
100% {
background-position: 10px 0;
}
}
// 扫描线动画 - 模拟终端扫描效果
@keyframes scan-line {
0% {
left: -20%;
opacity: 0;
}
30% {
opacity: .3;
}
70% {
opacity: .3;
}
100% {
left: 80%;
opacity: 0;
}
}
.menu {