HTML SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
<div class="parent">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</body>
</html>
CSS SOURCE CODE
body, html {
background-color: black;
margin: 0;
overflow: hidden;}
body {
width: 50%;}
.parent {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);}
.line {
transform-origin: center;
margin: 1vh;
width: 40vw;
height: 1px;
-webkit-animation-name: spin;
animation-name: spin;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;}
.line:nth-child(1) {
-webkit-animation-delay: -100ms;
animation-delay: -100ms;
background-color: #00ecff;}
.line:nth-child(2) {
-webkit-animation-delay: -200ms;
animation-delay: -200ms;
background-color: #00c6ff;}
.line:nth-child(3) {
-webkit-animation-delay: -300ms;
animation-delay: -300ms;
background-color: #00b3ff;}
.line:nth-child(4) {
-webkit-animation-delay: -400ms;
animation-delay: -400ms;
background-color: #009fff;}
.line:nth-child(5) {
-webkit-animation-delay: -500ms;
animation-delay: -500ms;
background-color: #008cff;}
.line:nth-child(6) {
-webkit-animation-delay: -600ms;
animation-delay: -600ms;
background-color: #0079ff;}
.line:nth-child(7) {
-webkit-animation-delay: -700ms;
animation-delay: -700ms;
background-color: #0066ff;}
.line:nth-child(8) {
-webkit-animation-delay: -800ms;
animation-delay: -800ms;
background-color: #0053ff;}
.line:nth-child(9) {
-webkit-animation-delay: -900ms;
animation-delay: -900ms;
background-color: #0040ff;}
.line:nth-child(10) {
-webkit-animation-delay: -1000ms;
animation-delay: -1000ms;
background-color: #002dff;}
.line:nth-child(11) {
-webkit-animation-delay: -1100ms;
animation-delay: -1100ms;
background-color: #001aff;}
.line:nth-child(12) {
-webkit-animation-delay: -1200ms;
animation-delay: -1200ms;
background-color: #0006ff;}
.line:nth-child(13) {
-webkit-animation-delay: -1300ms;
animation-delay: -1300ms;
background-color: #0d00ff;}
.line:nth-child(14) {
-webkit-animation-delay: -1400ms;
animation-delay: -1400ms;
background-color: #00ecff;}
.line:nth-child(15) {
-webkit-animation-delay: -1500ms;
animation-delay: -1500ms;
background-color: #2000ff;}
.line:nth-child(16) {
-webkit-animation-delay: -1600ms;
animation-delay: -1600ms;
background-color: #3300ff;}
.line:nth-child(17) {
-webkit-animation-delay: -1700ms;
animation-delay: -1700ms;
background-color: #4600ff;}
.line:nth-child(18) {
-webkit-animation-delay: -1800ms;
animation-delay: -1800ms;
background-color: #5900ff;}
.line:nth-child(19) {
-webkit-animation-delay: -1900ms;
animation-delay: -1900ms;
background-color: #6c00ff;}
.line:nth-child(20) {
-webkit-animation-delay: -2000ms;
animation-delay: -2000ms;
background-color: #8000ff;}
.line:nth-child(21) {
-webkit-animation-delay: -2100ms;
animation-delay: -2100ms;
background-color: #9300ff;}
.line:nth-child(22) {
-webkit-animation-delay: -2200ms;
animation-delay: -2200ms;
background-color: #a600ff;}
.line:nth-child(23) {
-webkit-animation-delay: -2300ms;
animation-delay: -2300ms;
background-color: #b900ff;}
.line:nth-child(24) {
-webkit-animation-delay: -2400ms;
animation-delay: -2400ms;
background-color: #cc00ff;}
.line:nth-child(25) {
-webkit-animation-delay: -2500ms;
animation-delay: -2500ms;
background-color: #df00ff;}
.line:nth-child(26) {
-webkit-animation-delay: -2600ms;
animation-delay: -2600ms;
background-color: #f200ff;}
.line:nth-child(27) {
-webkit-animation-delay: -2700ms;
animation-delay: -2700ms;
background-color: #ff00f9;
}
.line:nth-child(28) {
-webkit-animation-delay: -2800ms;
animation-delay: -2800ms;
background-color: #ff00e6;}
.line:nth-child(29) {
-webkit-animation-delay: -2900ms;
animation-delay: -2900ms;
background-color: #ff00d2;}
.line:nth-child(30) {
-webkit-animation-delay: -3000ms;
animation-delay: -3000ms;
background-color: #ff00bf;}
.line:nth-child(31) {
-webkit-animation-delay: -3100ms;
animation-delay: -3100ms;
background-color: #ff00ac;}
.line:nth-child(32) {
-webkit-animation-delay: -3200ms;
animation-delay: -3200ms;
background-color: #ff0099;}
.line:nth-child(33) {
-webkit-animation-delay: -3300ms;
animation-delay: -3300ms;
background-color: #ff0086;
}
.line:nth-child(34) {
-webkit-animation-delay: -3400ms;
animation-delay: -3400ms;
background-color: #ff0073;
}
.line:nth-child(35) {
-webkit-animation-delay: -3500ms;
animation-delay: -3500ms;
background-color: #ff0060;
}
.line:nth-child(36) {
-webkit-animation-delay: -3600ms;
animation-delay: -3600ms;
background-color: #ff004d;
}
.line:nth-child(37) {
-webkit-animation-delay: -3700ms;
animation-delay: -3700ms;
background-color: #ff0039;
}
.line:nth-child(38) {
-webkit-animation-delay: -3800ms;
animation-delay: -3800ms;
background-color: #ff0026;
}
.line:nth-child(39) {
-webkit-animation-delay: -3900ms;
animation-delay: -3900ms;
background-color: #ff0013;
}
.line:nth-child(40) {
-webkit-animation-delay: -4000ms;
animation-delay: -4000ms;
background-color: red;
}
@-webkit-keyframes spin {
to {
transform: rotate(360deg);}}
@keyframes spin {
to {
transform: rotate(360deg);}}
