|
|
| （未显示同一用户的3个中间版本） |
| 第1行： |
第1行： |
| {{#CSS: | | {{#CSS: |
| @import url(https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-16px.css);
| | p { |
| | | word-break: normal; |
| .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;
| |
| } | | } |
| }} | | }} |
| | | The word-break property specifies how words should break when reaching the end of a line. The word-break property specifies how words should break when reaching the end of a line. The word-break property specifies how words should break when reaching the end of a line. The word-break property specifies how words should break when reaching the end of a line. |
| <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>
| |
