A Pen by gisleyne martins.

A-Pen-by-gisleyne-martins.markdown

A Pen by gisleyne martins

A Pen by gisleyne martins on CodePen.

License.

index.html

<div class="borda front">
  
  <div class="bfora"> </div>
  <div class="bdentro"> </div>
    <div class="center"></div>
    <div class="linha1"></div>
    <div class="linha2"></div>
    <div class="linha3"></div>
    <div class="linha4"></div>
    <div class="linha5"></div>
    <div class="linha6"></div>
    <div class="linha7"></div>
    <div class="linha8"></div>
    <div class="linha9"></div>
</div>

style.css

body{
  background: #732588;
}

.borda {
  width: 200px;
  height: 200px;
  background: transparent;
  border: 4px solid #ccc;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  -webkit-animation: rotate-borda 2.5s infinite;
  -webkit-animation-timing-function: linear; 
  left:20%;
  
}

.bfora{
  
    border: 5px solid #50403a;
    background: transparent;
    position: absolute;
    height: 210px;
    width: 210px;
    border-radius: 50%;
    top: -10px;
    left: -10px;
}
.bdentro{

    border: 3px solid #f7f7f7;
    position: absolute;
    height: 194px;
    width: 194px;
    border-radius: 50%;
  }

.center{
  height: 20px;
  width: 20px;
  background: #2c2c2c;
  border-radius: 50%;
  border: 3px solid #d5d5d5;
  position: absolute;
  left: 87px;
  top: 87px;
}
.linha1{
  width: 1px;
  height: 200px;
  background: #d7d7d7;
  -webkit-transform: rotate(0deg);
  position: absolute;
  left: 100px;
  top: 0px;
}

.linha2{
  width: 1px;
  height: 200px;
  background: #d7d7d7;
  -webkit-transform: rotate(20deg);
  position: absolute;
  left: 100px;
  top: 0px;
}

.linha3{
  width: 1px;
  height: 200px;
  background: #d7d7d7;
  -webkit-transform: rotate(40deg);
  position: absolute;
  left: 100px;
  top: 0px;
}
.linha4{
  width: 1px;
  height: 200px;
  background: #d7d7d7;
  -webkit-transform: rotate(60deg);
  position: absolute;
  left: 100px;
  top: 0px;
}
.linha5{
  width: 1px;
  height: 200px;
  background: #d7d7d7;
  -webkit-transform: rotate(80deg);
  position: absolute;
  left: 100px;
  top: 0px;
}
.linha6{
  width: 1px;
  height: 200px;
  background: #d7d7d7;
  -webkit-transform: rotate(100deg);
  position: absolute;
  left: 100px;
  top: 0px;
}
.linha7{
  width: 1px;
  height: 200px;
  background: #d7d7d7;
  -webkit-transform: rotate(120deg);
  position: absolute;
  left: 100px;
  top: 0px;
}
.linha8{
  width: 1px;
  height: 200px;
  background: #d7d7d7;
  -webkit-transform: rotate(140deg);
  position: absolute;
  left: 100px;
  top: 0px;
}
.linha9{
  width: 1px;
  height: 200px;
  background: #d7d7d7;
  -webkit-transform: rotate(160deg);
  position: absolute;
  left: 100px;
  top: 0px;
}
@-webkit-keyframes rotate-borda
{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}