LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
html,
body {
  background-color: #240F52; 
  background-image: linear-gradient(0deg, #36295e, #1c1045);
  height: 100%;
  overflow: hidden;
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  align-items: center;
}

.center {
  margin: 0 auto;
}

.outer-ring {
  position: absolute;
  left: calc(50% - 150px);
  height: 300px;
  width: 300px;
  background-image: linear-gradient(135deg, #FEED07 0%, #FE6A50 5%, #ED00AA 15%, #2FE3FE 50%, #8900FF 100%);
  border-radius: 50%;
  
  /*  Rotate  */
  animation-duration: 2s;
  animation-name: rotate;
  animation-iteration-count: infinite;
}

.inner-ring {
  position: absolute;
  left: calc(50% - 140px);
  height: 280px;
  width: 280px;
  background-image: linear-gradient(0deg, #36295e, #1c1045);
  border-radius: 50%;
}

@keyframes rotate {
    0% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}




Description

Simple gradient ring example.
Term
Sat, 04/14/2018 - 20:49

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv