| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="https://use.fontawesome.com/d1341f9b7a.js"></script> |
| <title>BotPack</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| } |
| body { |
| background-color: #190096; |
| } |
| .bg { |
| width: 100%; |
| height: 100vh; |
| background-image: linear-gradient(45deg, #243aff 0%, |
| #4687f0 46%, |
| #5800d4 100%); |
| } |
| .glass { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| overflow: hidden; |
| } |
| .glass li { |
| position: absolute; |
| display: block; |
| list-style: none; |
| width: 20px; |
| height: 20px; |
| background: rgba(255, 255, 255, 0.1); |
| border: 1px solid rgba(255, 255, 255, 0.18); |
| animation: spin 5s linear infinite; |
| bottom: -150px; |
| } |
| .glass li:nth-child(1) { |
| left: 35%; |
| width: 150px; |
| height: 150px; |
| animation-delay: 0s; |
| } |
| .glass li:nth-child(2) { |
| left: 10%; |
| width: 20px; |
| height: 20px; |
| animation-delay: 2s; |
| animation-duration: 12s; |
| } |
| .glass li:nth-child(3) { |
| left: 70%; |
| width: 20px; |
| height: 20px; |
| animation-delay: 4s; |
| } |
| .glass li:nth-child(4) { |
| left: 40%; |
| width: 60px; |
| height: 60px; |
| animation-delay: 0s; |
| animation-duration: 18s; |
| } |
| .glass li:nth-child(5) { |
| left: 65%; |
| width: 20px; |
| height: 20px; |
| animation-delay: 0s; |
| } |
| .glass li:nth-child(6) { |
| left: 75%; |
| width: 110px; |
| height: 110px; |
| animation-delay: 3s; |
| } |
| .glass li:nth-child(7) { |
| left: 35%; |
| width: 150px; |
| height: 150px; |
| animation-delay: 7s; |
| } |
| .glass li:nth-child(8) { |
| left: 50%; |
| width: 25px; |
| height: 25px; |
| animation-delay: 15s; |
| animation-duration: 45s; |
| } |
| .glass li:nth-child(9) { |
| left: 20%; |
| width: 15px; |
| height: 15px; |
| animation-delay: 2s; |
| animation-duration: 35s; |
| } |
| .glass li:nth-child(10) { |
| left: 85%; |
| width: 150px; |
| height: 150px; |
| animation-delay: 0s; |
| animation-duration: 11s; |
| } |
| .glass li:nth-child(11) { |
| left: 10%; |
| width: 110px; |
| height: 110px; |
| animation-delay: 0s; |
| animation-duration: 11s; |
| } |
| glass li:nth-child(12) { |
| left: 45%; |
| width: 160px; |
| height: 160px; |
| animation-delay: 2s; |
| animation-duration: 5s; |
| } |
| |
| @keyframes spin { |
| 0% { |
| transform: translateY(0) rotate(0deg); |
| opacity: 1; |
| border-radius: 80%; |
| } |
| 100% { |
| transform: translateY(-1000px) rotate(720deg); |
| opacity: 0; |
| border-radius: 100%; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="bg"> |
| <ul class="glass"> |
| <li></li> |
| <li></li> |
| <li></li> |
| <li></li> |
| <li></li> |
| <li></li> |
| <li></li> |
| <li></li> |
| <li></li> |
| <li></li> |
| <li></li> |
| <li></li> |
| </ul> |
| </div> |
| </body> |
| </html> |
