#codevember - day 16

In this example below you will see how to do a #codevember - day 16 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by vdaguenet, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright vdaguenet ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>#codevember - day 16</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/vdaguenet/codevember-day-16-RWvMyj */
body {
  background: #eee;
}

.container {
  width: 400px;
  height: 400px;
  box-shadow: 0px 0px 30px 6px #ddd;
  position: relative;
  top: 50vh;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
  background: white;
}

.circle {
  width: 180%;
  height: 180%;
  border: 50px solid black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  animation: 2s scaleAnim infinite;
}

.circle:nth-child(1) {
  animation-delay: 0.15s;
}

.circle:nth-child(2) {
  animation-delay: 0.3s;
}

.circle:nth-child(3) {
  animation-delay: 0.45s;
}

.circle:nth-child(4) {
  animation-delay: 0.6s;
}

@keyframes scaleAnim {
  from {
    transform: translateX(-50%) translateY(-50%) scale(0)
  }
  to {
    transform: translateX(-50%) translateY(-50%) scale(1)
  }
}

Comments