rohow
126 行
2.4 KiB
SCSS
126 行
2.4 KiB
SCSS
@import "variables";
|
|
|
|
.header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
|
|
&__inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&__center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.menu {
|
|
margin: 20px 0;
|
|
|
|
&__inner {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
li {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
padding-bottom: 10px;
|
|
|
|
&.active {
|
|
color: var(--cyan);
|
|
}
|
|
|
|
&:not(:last-of-type) {
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__sub-inner {
|
|
position: absolute;
|
|
z-index: 99;
|
|
top: 35px;
|
|
left: 0;
|
|
display: none;
|
|
margin: 0;
|
|
padding: 10px;
|
|
list-style: none;
|
|
border: 2px solid var(--red);
|
|
background: var(--background);
|
|
box-shadow: 0 10px var(--background), -10px 10px var(--background), 10px 10px var(--background);
|
|
overflow: hidden;
|
|
|
|
li {
|
|
padding: 5px;
|
|
white-space: nowrap;
|
|
text-decoration: underline;
|
|
color: var(--green);
|
|
opacity: 0;
|
|
transform: translateX(-10px);
|
|
|
|
&:not(:last-of-type) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
&.open {
|
|
display: block;
|
|
animation: terminal-frame-reveal 0.3s ease-out forwards;
|
|
|
|
// 逐行渲染效果 - 为每个子项添加延迟动画
|
|
li {
|
|
animation: terminal-line 0.2s ease-out forwards;
|
|
|
|
// 为前20个菜单项添加递增延迟
|
|
@for $i from 1 through 20 {
|
|
&:nth-child(#{$i}) {
|
|
animation-delay: #{($i * 0.05) + 0.1}s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.button {
|
|
background-color: transparent;
|
|
color: var(--foreground);
|
|
margin: 0 0 0 .5rem;
|
|
padding: 0;
|
|
}
|
|
|
|
// 菜单框架渲染动画 - 从上到下逐层渲染边框和内容
|
|
@keyframes terminal-frame-reveal {
|
|
0% {
|
|
clip-path: inset(-10px -10px calc(100% + 10px) -10px);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
clip-path: inset(-10px -10px -10px -10px);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// 菜单项逐行渲染动画 - 模拟终端文本逐行输出
|
|
@keyframes terminal-line {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-2px);
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
}
|