| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>loading</title>
- <style>
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- user-select: none;
- }
- .content {
- width: 520px;
- height: 150px;
- text-align: center;
- margin: 0;
- transform: translateZ(0);
- color: #0091ff;
- font-weight: 700;
- display: inline-block;
- letter-spacing: -4px;
- font-size: 72px;
- font-family: DouYu;
- text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa,
- 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3),
- 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2),
- 0 20px 20px rgba(0, 0, 0, 0.15);
- text-shadow: 0 1px 0 rgb(115, 176, 233), 0 2px 0 #6b83ee, 0 3px 0 rgb(214, 153, 153), 0 4px 0 #48a8b4,
- 0 5px 0 rgb(115, 199, 164), 0 6px 1px rgba(47, 125, 228, 0.1), 0 0 5px rgba(0, 0, 0, 0.1),
- 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25),
- 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
- }
- span {
- display: inline-block;
- animation: leSnake 1.5s ease-in-out;
- animation-iteration-count: infinite;
- }
- @keyframes leSnake {
- from,
- to {
- transform: translateY(0px);
- }
- 50% {
- transform: translateY(30px);
- }
- }
- </style>
- </head>
- <body>
- <h1 class="content leSnake">
- <span class="letter" style="animation-delay: 100ms">C</span
- ><span class="letter" style="animation-delay: 250ms">E</span
- ><span class="letter" style="animation-delay: 400ms; letter-spacing: 6px">T</span
- ><span class="letter" style="animation-delay: 550ms">电</span
- ><span class="letter" style="animation-delay: 700ms">子</span
- ><span class="letter" style="animation-delay: 850ms">阅</span
- ><span class="letter" style="animation-delay: 1000ms">卷</span>
- </h1>
- </body>
- </html>
|
