diff --git a/src/styles/header.scss b/src/styles/header.scss index 41aa66b..1f07135 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -141,12 +141,15 @@ 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; @@ -155,6 +158,19 @@ &.open { display: block; + animation: terminal-frame 0.2s ease-out; + + // 逐行渲染效果 - 为每个子项添加延迟动画 + 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; + } + } + } } } } @@ -165,4 +181,34 @@ margin: 0 0 0 .5rem; padding: 0; } + + // 菜单框架渲染动画 - 模拟终端窗口从上到下打开 + @keyframes terminal-frame { + 0% { + max-height: 0; + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + max-height: 800px; + opacity: 1; + } + } + + // 菜单项逐行渲染动画 - 模拟终端文本逐行输出 + @keyframes terminal-line { + 0% { + opacity: 0; + transform: translateX(-10px); + } + 50% { + opacity: 0.5; + } + 100% { + opacity: 1; + transform: translateX(0); + } + } }