| <!DOCTYPE html> |
| <html lang="pt-br"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Road Thent OS - Boot Sequence</title> |
| <style> |
| body { |
| margin: 0; |
| background: #0D001A; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| height: 100vh; |
| overflow: hidden; |
| font-family: 'Segoe UI', sans-serif; |
| } |
| |
| |
| .boot-container { |
| position: relative; |
| width: 200px; |
| height: 200px; |
| } |
| |
| |
| .light { |
| position: absolute; |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| filter: blur(15px); |
| opacity: 0; |
| animation: win7boot 4s cubic-bezier(0.4, 0, 0.2, 1) forwards; |
| } |
| |
| .l1 { background: #00FFFF; top: 0; left: 80px; animation-delay: 0.2s; } |
| .l2 { background: #BF00FF; top: 80px; left: 160px; animation-delay: 0.4s; } |
| .l3 { background: #4B0082; top: 160px; left: 80px; animation-delay: 0.6s; } |
| .l4 { background: #FFFFFF; top: 80px; left: 0; animation-delay: 0.8s; } |
| |
| |
| @keyframes win7boot { |
| 0% { transform: scale(0) translate(0, 0); opacity: 0; } |
| 50% { opacity: 0.8; } |
| 100% { |
| transform: scale(1.2) translate(var(--tx), var(--ty)); |
| opacity: 0; |
| filter: blur(30px); |
| } |
| } |
| |
| |
| .cubic-logo { |
| position: absolute; |
| width: 80px; |
| height: 80px; |
| background: #BF00FF; |
| transform: rotateX(45deg) rotateZ(45deg); |
| box-shadow: 20px 20px 40px rgba(0,0,0,0.5), -1px -1px 0px white inset; |
| opacity: 0; |
| animation: showLogo 1.5s 3s forwards; |
| } |
| |
| @keyframes showLogo { |
| from { opacity: 0; transform: rotateX(45deg) rotateZ(45deg) scale(0.5); } |
| to { opacity: 1; transform: rotateX(45deg) rotateZ(45deg) scale(1); } |
| } |
| |
| .text-load { |
| position: absolute; |
| bottom: -60px; |
| width: 100%; |
| text-align: center; |
| color: white; |
| letter-spacing: 5px; |
| font-weight: 200; |
| opacity: 0; |
| animation: fadeIn 2s 3.5s forwards; |
| } |
| |
| @keyframes fadeIn { to { opacity: 0.5; } } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="boot-container"> |
| <div class="light l1" style="--tx: 0px; --ty: 80px;"></div> |
| <div class="light l2" style="--tx: -80px; --ty: 0px;"></div> |
| <div class="light l3" style="--tx: 0px; --ty: -80px;"></div> |
| <div class="light l4" style="--tx: 80px; --ty: 0px;"></div> |
|
|
| <div class="cubic-logo"></div> |
| |
| <div class="text-load">INICIANDO ROAD THENT OS...</div> |
| </div> |
|
|
| </body> |
| </html> |
