87 行
1.8 KiB
SCSS
87 行
1.8 KiB
SCSS
@import "./variables.scss";
|
|
|
|
.dividing {
|
|
flex: 1;
|
|
display: block;
|
|
width: 100%;
|
|
height: 25px;
|
|
position: relative;
|
|
transition: opacity 0.3s ease-in-out;
|
|
--dash-spacing: 10px;
|
|
--dash-width: 2px;
|
|
|
|
opacity: 1;
|
|
transition: opacity 0.3s ease-in-out;
|
|
|
|
// 虚线背景层 - 带遮罩
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: repeating-linear-gradient(
|
|
90deg,
|
|
var(--foreground),
|
|
var(--foreground) var(--dash-width),
|
|
transparent 0,
|
|
transparent var(--dash-spacing)
|
|
);
|
|
background-size: var(--dash-spacing) 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: -5%;
|
|
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;
|
|
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
}
|
|
|
|
// 虚线流动动画 - 模拟加载进度
|
|
@keyframes line-flow {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: var(--dash-spacing) 0;
|
|
}
|
|
}
|
|
|
|
// 扫描线动画 - 模拟终端扫描效果
|
|
@keyframes scan-line {
|
|
0% {
|
|
left: -5%;
|
|
width: 5%;
|
|
opacity: 0;
|
|
}
|
|
30% {
|
|
width: 30%;
|
|
opacity: 0.3;
|
|
}
|
|
70% {
|
|
opacity: 0.3;
|
|
}
|
|
100% {
|
|
left: 80%;
|
|
opacity: 0;
|
|
}
|
|
}
|