CSS
body {
background-color: #1D1F20;
background: repeating-linear-gradient(45deg, #2b2b2b 0%, #2b2b2b 10%, #1D1F20 0%, #1D1F20 50%) 0 / 15px 15px;
overflow: hidden;
margin: 120px 0 0 275px;
}
.wrapper {
position: relative;
height:425px;
width: 475px;
margin: auto;
}
.ring {
position: absolute;
top: 30%;
left: 20%;
transform: translate(-50%, -50%);
transform-origin: center;
border-radius: 50%;
box-sizing: border-box;
animation: orbit 20s infinite linear;
}
.ring:nth-child(1) {
width: 20px;
height: 20px;
box-shadow: 0 0 20px #00ffff;
}
.ring:nth-child(2) {
width: 40px;
height: 80px;
box-shadow: 0 0 30px #fff;
animation-duration: 10s;
}
.ring:nth-child(3) {
width: 80px;
height: 120px;
box-shadow: 0 0 30px #0000ff;
animation-duration: 6.66667s;
}
.ring:nth-child(4) {
width: 160px;
height: 160px;
box-shadow: 0 0 30px #fff;
animation-duration: 5s;
}
.ring:nth-child(5) {
width: 320px;
height: 200px;
box-shadow: 0 0 30px #800080;
animation-duration: 4s;
}
.ring:nth-child(6) {
width: 340px;
height: 240px;
box-shadow: 0 0 30px #00ffff;
animation-duration: 3.33333s;
}
.ring:nth-child(7) {
width: 380px;
height: 280px;
box-shadow: 0 0 30px #0000ff;
animation-duration: 2.85714s;
}
.ring:nth-child(8) {
width: 390px;
height: 320px;
box-shadow: 0 0 30px #800080;
animation-duration: 2.5s;
}
.ring:nth-child(9) {
width: 395px;
height: 360px;
box-shadow: 0 0 30px #00ffff;
animation-duration: 2.22222s;
}
.ring:nth-child(10) {
width: 400px;
height: 400px;
box-shadow: 0 0 20px #0000ff;
animation-duration: 2s;
}
@keyframes orbit {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
1 Response