Test

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

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

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  
  
  
      <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! */
      .box {  
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  display: inline-block;
}
.box:hover .line {
  background: #757575;
}
.line {
  position: relative;
  width: 100px;
  height: 1px;
  transform-origin: 50px 50px;
}
.line:after {
  position: absolute;
  content: "";
  top: -5px;
  width: 25px;
  height: 25px;
  background: #42A5F5;
  border-radius: 50%;
  animation: yo 2s ease infinite;
}

@keyframes yo {
  0%, 100% {
    left: 0
  }
  50% {
    left: 100%;
  }
}

.line:nth-child(1) {
  transform: rotate(50deg);
}

.line:nth-child(2) {
  transform: rotate(100deg);
}

.line:nth-child(3) {
  transform: rotate(150deg);
}

.line:nth-child(4) {
  transform: rotate(200deg);
}

.line:nth-child(5) {
  transform: rotate(250deg);
}

.line:nth-child(6) {
  transform: rotate(300deg);
}

.line:nth-child(7) {
  transform: rotate(350deg);
}
    </style>

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

</head>

<body>

  <div class="box">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/marvinengelmann/test-WpqwXJ */
.box {  
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  display: inline-block;
}
.box:hover .line {
  background: #757575;
}
.line {
  position: relative;
  width: 100px;
  height: 1px;
  transform-origin: 50px 50px;
}
.line:after {
  position: absolute;
  content: "";
  top: -5px;
  width: 25px;
  height: 25px;
  background: #42A5F5;
  border-radius: 50%;
  animation: yo 2s ease infinite;
}

@keyframes yo {
  0%, 100% {
    left: 0
  }
  50% {
    left: 100%;
  }
}

.line:nth-child(1) {
  transform: rotate(50deg);
}

.line:nth-child(2) {
  transform: rotate(100deg);
}

.line:nth-child(3) {
  transform: rotate(150deg);
}

.line:nth-child(4) {
  transform: rotate(200deg);
}

.line:nth-child(5) {
  transform: rotate(250deg);
}

.line:nth-child(6) {
  transform: rotate(300deg);
}

.line:nth-child(7) {
  transform: rotate(350deg);
}

Comments