<!-- CODE = #A100 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>NETBYZZ A100</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="square black"> <div class="square"> <div class="square black"> <div class="square"> <div class="square black"> <div class="square"> <div class="square black"> <div class="square"> <div class="square black"> <div class="square"> <div class="square black"> <div class="square"> <div class="square black"> <div class="square"> <div class="square black"> <div class="square"> <div class="square black"> <div class="square"> <div class="square black"> <div class="square"> <div class="square black"> <div class="square"> <div class="square black"> <div class="square"> <div class="square black"> <div class="square"> <div class="square black" > <div class="square"> <div class="square black" ></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
html { background: black; height: 100%; position: relative; overflow: hidden; } .container { height: 300px; width: 300px; position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -150px; } .square { height: 94%; width: 94%; background: white; position: absolute; top: 50%; left: 50%; margin: -47% 0 0 -47%; } .black { background: black; animation: rotate 10s infinite linear; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }