LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Animated Circle with Gradient Border

CSS
.circle {
  background-image:linear-gradient(red,green);
  padding:1px;
  width:300px;
  height:300px;
  border-style: solid;
  border-color:transparent;
   border-radius: 50%;
  border-width:0px;
 animation:rot 1s linear infinite; 
  padding:1px;
}
.circle > div {
  background:white;
  height: 298px;
  width: 298px;
  border-style: solid;
  border-color:transparent;
   border-radius: 50%;
  border-width:1px;
 
  
  
}

.circle p {
  
  animation:none;
  
}
p{
  position:absolute;
  z-index:10;
  top:130px;
  left:35px;
}
@keyframes rot {
   0%
  {
    transform:rotate(0deg)
  }
   25%
  {
    transform:rotate(90deg)
  }
  50%
  {
    transform:rotate(180deg)
  }
   75%
  {
    transform:rotate(270deg)
  }
  100% {
    transform:rotate(360deg)
  }
}

Description

Creating an animated circle with gradient border around it only with CSS
Term
Wed, 01/24/2018 - 14:40

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv