Cool little animation
Made This In HTML and CSS In About 10 mins
-----------------------------------------------------------------------------------------------------------------------------
CSS
* { margin:0; padding:0; box-sizing:border-box; } body{ display:flex; justify-content:center; align-items:center; min-height:100vh; background-color:black; overflow:hidden; } .container { position: relative; width: 100%; transform: rotate(-35deg); } .container .box { position: relative; left: -200px; display: flex; justify-content: center; align-items: center; width: calc(100% + 400px); -webkit-box-reflect: below 1px linear-gradient(transparent, #0004); animation: animateSurface 1.5s ease-in-out infinite; } @keyframes animateSurface { 0% { transform: translateX(0); } 100% { transform: translateX(-200px); } } .container .box .cube { position: relative; width: 200px; height: 200px; background-color: #03e9f4; box-shadow: 0 0 5px rgba(3, 233, 244, 1), 0 0 25px rgba(3, 233, 244, 1), 0 0 50px rgba(3, 233, 244, 1), 0 0 100px rgba(3, 233, 244, 1), 0 0 200px rgba(3, 233, 244, 0.5), 0 0 300px rgba(3, 233, 244, 0.5); transform-origin: bottom right; animation: animate 1.5s ease-in-out infinite; } @keyframes animate { 0% { transform: rotate(0); } 60% { transform: rotate(90deg); } 65% { transform: rotate(85deg); } 70% { transform: rotate(90deg); } 75% { transform: rotate(87.5deg); } 80%, 100% { transform: rotate(90deg); } }
---------------------------------------------------------------------------------------------------------------------------
HTML
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE-Edge"> <meta http-equiv="content-type" type="html/css/js"> <meta name="viewport" content="width=device=width initial-scale=1.0"> <link rel="author" content="VinVox"> <link rel="stylesheet" href="animation.css"> <script type="text/javascript"> var page = "Neon Square Up Hill"; console.log("hello world"); document.title = page; </script> </head> <body> <div class="container"> <div class="box"> <div class="cube"></div> </div> </div> </body> </html>
Cool little animation
It's a neat little demo, but it's just that. A demo, that loops after only 2 seconds and made in 10 minutes, and even then it's not that big, at least according to the code you shared in the author comments.