expanding circle

In this example below you will see how to do a expanding circle with some HTML / CSS and Javascript

do you even expand?

Thumbnail
This awesome code was written by erikpantzar, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright erikpantzar ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>expanding circle</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      .circle {
  width: 40vh;
  height: 40vh;
  border-radius: 50%;
  background: blue;
  position: fixed;
  left: 80vw;
  top: 50vh;
  transform: translate(-50%, -50%);
  animation: scale 5s ease-in-out infinite alternate;
}

@keyframes scale {
  from {
    width: 10vh;
    height: 10vh;
  }
  to {
    width: 80vh;
    height: 80vh;
  }
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

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

</body>

</html>

/*Downloaded from https://www.codeseek.co/erikpantzar/expanding-circle-pyYmev */
.circle {
  width: 40vh;
  height: 40vh;
  border-radius: 50%;
  background: blue;
  position: fixed;
  left: 80vw;
  top: 50vh;
  transform: translate(-50%, -50%);
  animation: scale 5s ease-in-out infinite alternate;
}

@keyframes scale {
  from {
    width: 10vh;
    height: 10vh;
  }
  to {
    width: 80vh;
    height: 80vh;
  }
}

Comments