CSS
body {
background: #000;
}
span {
position: relative;
display: block;
width: 100%;
height: 0;
padding-bottom: 100%;
background: black;
-webkit-animation: borderRadiuses 2.5s infinite linear;
animation: borderRadiuses 2.5s infinite linear;
}
div {
position: absolute;
top: 50%;
left: 50%;
border-radius: inherit;
}
div:nth-of-type(1) {
width: 10%;
height: 10%;
margin-top: -5%;
margin-left: -5%;
border: 3px solid orange;
-webkit-animation: colors 3s infinite linear;
animation: colors 3s infinite linear;
}
div:nth-of-type(2) {
width: 20%;
height: 20%;
margin-top: -10%;
margin-left: -10%;
border: 3px solid yellow;
-webkit-animation: colors 3s -2.7s infinite linear;
animation: colors 3s -2.7s infinite linear;
}
div:nth-of-type(3) {
width: 30%;
height: 30%;
margin-top: -15%;
margin-left: -15%;
border: 3px solid green;
-webkit-animation: colors 3s -2.4s infinite linear;
animation: colors 3s -2.4s infinite linear;
}
div:nth-of-type(4) {
width: 40%;
height: 40%;
margin-top: -20%;
margin-left: -20%;
border: 3px solid lightgreen;
-webkit-animation: colors 3s -2.1s infinite linear;
animation: colors 3s -2.1s infinite linear;
}
div:nth-of-type(5) {
width: 50%;
height: 50%;
margin-top: -25%;
margin-left: -25%;
border: 3px solid teal;
-webkit-animation: colors 3s -1.8s infinite linear;
animation: colors 3s -1.8s infinite linear;
}
div:nth-of-type(6) {
width: 60%;
height: 60%;
margin-top: -30%;
margin-left: -30%;
border: 3px solid blue;
-webkit-animation: colors 3s -1.5s infinite linear;
animation: colors 3s -1.5s infinite linear;
}
div:nth-of-type(7) {
width: 70%;
height: 70%;
margin-top: -35%;
margin-left: -35%;
border: 3px solid darkblue;
-webkit-animation: colors 3s -1.2s infinite linear;
animation: colors 3s -1.2s infinite linear;
}
div:nth-of-type(8) {
width: 80%;
height: 80%;
margin-top: -40%;
margin-left: -40%;
border: 3px solid purple;
-webkit-animation: colors 3s -0.9s infinite linear;
animation: colors 3s -0.9s infinite linear;
}
div:nth-of-type(9) {
width: 88%;
height: 88%;
margin-top: -44%;
margin-left: -44%;
border: 3px solid rgb(207, 4, 102);
-webkit-animation: colors 3s -0.6s infinite linear;
animation: colors 3s -0.6s infinite linear;
}
div:nth-of-type(10) {
width: 96%;
height: 96%;
margin-top: -48%;
margin-left: -48%;
border: 3px solid red;
-webkit-animation: colors 3s -0.3s infinite linear;
animation: colors 3s -0.3s infinite linear;
}
@keyframes borderRadiuses {
50% {
border-radius: 50%;
}
}
@keyframes colors {
10% {
border-color: red;
}
20% {
border-color: rgb(207, 4, 102);
}
30% {
border-color: purple;
}
40% {
border-color: darkblue;
}
50% {
border-color: blue;
}
60% {
border-color: teal;
}
70% {
border-color: lightgreen;
}
80% {
border-color: green;
}
90% {
border-color: yellow;
}
100% {
border-color: orange;
}
}
@-webkit-keyframes borderRadiuses {
50% {
border-radius: 50%;
}
}
@-webkit-keyframes colors {
10% {
border-color: red;
}
20% {
border-color: rgb(207, 4, 102);
}
30% {
border-color: purple;
}
40% {
border-color: darkblue;
}
50% {
border-color: blue;
}
60% {
border-color: teal;
}
70% {
border-color: lightgreen;
}
80% {
border-color: green;
}
90% {
border-color: yellow;
}
100% {
border-color: orange;
}
}
