SCSS
html, body {
background: #333;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
margin: 3em auto;
height: 200px;
width: 200px;
border-radius: 100%;
background-image: -webkit-radial-gradient(45px 45px, circle cover, #72cfa2, #398761);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes move {
0% { transform: translate(0,0); }
100% { transform: translate(50px,0); }
}
