Netbyzz

#A100
Illusion Animation

HTML :

<!-- 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>

CSS :

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);
    }
}

Source Code