|
|
| 第1行： |
第1行： |
| {{#CSS:
| | <div style="font-family:Yuesong"> |
| @import url(https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-16px.css); /* 确保这个链接是可访问的，否则字体可能无法加载 */
| | 测试文本 Test Text |
| | |
| .out-all {
| |
| position: fixed;
| |
| right: 0%;
| |
| top: 0%;
| |
| z-index: 99;
| |
| height: 100%;
| |
| width: 100%;
| |
| }
| |
| | |
| .all {
| |
| background-color: black;
| |
| background-image: radial-gradient(rgba(0, 150, 0, 0.75), black 120%);
| |
| height: 100vh;
| |
| margin: 0;
| |
| overflow: hidden;
| |
| padding: 2rem;
| |
| color: white;
| |
| font-family: 'VonwaonBitmap 16px', sans-serif;
| |
| text-shadow: 0 0 5px #C8C8C8;
| |
| overflow: hidden;
| |
| position: relative;
| |
| overflow: hidden;
| |
| | |
| &::after {
| |
| content: "";
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100vw;
| |
| height: 100vh;
| |
| background: repeating-linear-gradient(0deg, rgba(black, 0.15), rgba(black, 0.15) 1px, transparent 1px, transparent 2px);
| |
| pointer-events: none;
| |
| }
| |
| }
| |
| ::selection {
| |
| background: #0080FF;
| |
| text-shadow: none;
| |
| }
| |
| | |
| .noise {
| |
| pointer-events: none;
| |
| position: absolute;
| |
| width: 100%;
| |
| height: 100%;
| |
| background-image: url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif"); /* 确保这个链接是可访问的，否则背景图片可能无法显示 */
| |
| background-repeat: no-repeat;
| |
| background-size: cover;
| |
| z-index: -1;
| |
| opacity: .02;
| |
| }
| |
| | |
| .overlay {
| |
| pointer-events: none;
| |
| position: absolute;
| |
| width: 100%;
| |
| height: 100%;
| |
| background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);
| |
| background-size: auto 4px;
| |
| z-index: 1;
| |
| }
| |
| | |
| .overlay::before {
| |
| content: "";
| |
| pointer-events: none;
| |
| position: absolute;
| |
| display: block;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| background-image: linear-gradient(0deg, transparent 0%, rgba(32, 128, 32, 0.2) 2%, rgba(32, 128, 32, 0.8) 3%, rgba(32, 128, 32, 0.2) 3%, transparent 100%);
| |
| background-repeat: no-repeat;
| |
| animation: scan 7.5s linear 0s infinite;
| |
| }
| |
| | |
| .noise, .overlay {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| }
| |
| | |
| @keyframes scan {
| |
| 0% { background-position: 0 -100vh; }
| |
| 35%, 100% { background-position: 0 100vh; }
| |
| }
| |
| | |
| .typing-text {
| |
| overflow: hidden;
| |
| white-space: nowrap;
| |
| width: 0;
| |
| animation: typing 4s steps(30) forwards;
| |
| }
| |
| | |
| @keyframes typing {
| |
| from { width: 0; }
| |
| to { width: 100%; }
| |
| }
| |
| | |
| .typing-text {
| |
| position: relative;
| |
| }
| |
| | |
| @keyframes upin {
| |
| 0% {
| |
| transform: translateY(20px);
| |
| opacity: 0;
| |
| }
| |
| 100% {
| |
| transform: translateY(0);
| |
| opacity: 1;
| |
| }
| |
| }
| |
| | |
| .co {
| |
| color: rgba(128, 255, 128, 0.8);
| |
| white-space: nowrap;
| |
| }
| |
| | |
| .po {
| |
| color: rgba(0, 255, 0, 0.8);
| |
| white-space: nowrap;
| |
| }
| |
| | |
| .a-link {
| |
| --link-color: 0, 255, 0;
| |
| --hover-link-color: 0, 255, 0;
| |
| --visited-link-color: 0, 255, 0;
| |
| }
| |
| | |
| .a-link a::before {
| |
| content: ">";
| |
| }
| |
| | |
| .a-link p::after {
| |
| content: "";
| |
| }
| |
| | |
| .all p {
| |
| margin-top: auto;
| |
| }
| |
| }}
| |
| | |
| <div class="out-all">
| |
| <div class="all">
| |
| <!-- 噪音层 -->
| |
| <div class="noise"></div>
| |
| <!-- 覆盖层 -->
| |
| <div class="overlay"></div>
| |
| | |
| <!-- 内联Flex布局容器 -->
| |
| <div style=" display:inline- flex;"> | |
| <!-- 信息认证中动画 -->
| |
| <div class="typing-text co" style="animation: typing 2s steps(18) forwards;">
| |
| 信息认证中...
| |
| </div>
| |
| <!-- 认证通过动画，延迟3秒后显示 -->
| |
| <div style="animation: upin 0.5s forwards; animation-delay: 3s; opacity:0; white-space:nowrap;">
| |
| ##gray|//认证通过//##
| |
| </div>
| |
| </div>
| |
| | |
| <!-- 命令行动画效果 -->
| |
| <div class="typing-text po" style="animation: typing 3s steps(18) forwards; animation-delay: 3s;">
| |
| dir /s /b level-c-1009
| |
| </div>
| |
| <div class="typing-text co" style="animation: typing 1.5s steps(10) forwards; animation-delay: 5s;">
| |
| File Not Found
| |
| </div>
| |
| <div class="typing-text po" style="animation: typing 3.5s steps(15) forwards; animation-delay: 6s;">
| |
| dir /s /b *level-c-1009
| |
| </div>
| |
| <div class="typing-text co" style="animation: typing 0.5s steps(18) forwards; animation-delay: 8.5s;">
| |
| Finding…
| |
| </div>
| |
| </div>
| |
| </div> | | </div> |
