Wave Lines
How do I make an wave lines?
A fun little 'wave' created by growing and rotating lines.Based off Dave Whyte's shot on Dribbble.. What is a wave lines? How do you make a wave lines? This script and codes were developed by Michael Hobizal on 05 January 2023, Thursday.
Wave Lines Previews
Wave Lines - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wave Lines</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='wrap'> <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> <script src="js/index.js"></script>
</body>
</html>Wave Lines - Script Codes CSS Codes
body { background: #283651;
}
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); }
}
@-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(-360deg); }
}
@keyframes spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); }
}
@-webkit-keyframes grow { 0% { width: 3px; -webkit-transform: rotate(-90deg); } 90% { width: 100px; -webkit-transform: rotateY(0deg); } 100% { width: 3px; -webkit-transform: rotateY(-90deg); }
}
@-moz-keyframes grow { 0% { width: 3px; -moz-transform: rotate(-90deg); } 90% { width: 100px; -moz-transform: rotateY(0deg); } 100% { width: 3px; -moz-transform: rotateY(-90deg); }
}
@keyframes grow { 0% { width: 3px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } 90% { width: 100px; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { width: 3px; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); }
}
.wrap { margin: 200px auto; position: relative; width: 200px; height: 200px; -webkit-transform-origin: center top; -moz-transform-origin: center top; -ms-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; -webkit-animation: spin 120s linear infinite; -moz-animation: spin 120s linear infinite; animation: spin 120s linear infinite;
}
.line { width: 100px; height: 1px; position: absolute; right: 50%; top: 0; -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%;
}
.line:after { content: ''; background: #fdfcec; width: 3px; height: 2px; -webkit-transform: rotate(-85deg); -moz-transform: rotate(-85deg); -ms-transform: rotate(-85deg); -o-transform: rotate(-85deg); transform: rotate(-85deg); border-radius: 2px; position: absolute; left: 0; top: 0;
}
.line:nth-of-type(1) { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg);
}
.line:nth-of-type(1):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 100ms; -moz-animation-delay: 100ms; animation-delay: 100ms;
}
.line:nth-of-type(2) { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); transform: rotate(20deg);
}
.line:nth-of-type(2):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 200ms; -moz-animation-delay: 200ms; animation-delay: 200ms;
}
.line:nth-of-type(3) { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg);
}
.line:nth-of-type(3):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms; animation-delay: 300ms;
}
.line:nth-of-type(4) { -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -ms-transform: rotate(40deg); -o-transform: rotate(40deg); transform: rotate(40deg);
}
.line:nth-of-type(4):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 400ms; -moz-animation-delay: 400ms; animation-delay: 400ms;
}
.line:nth-of-type(5) { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg);
}
.line:nth-of-type(5):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 500ms; -moz-animation-delay: 500ms; animation-delay: 500ms;
}
.line:nth-of-type(6) { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg);
}
.line:nth-of-type(6):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 600ms; -moz-animation-delay: 600ms; animation-delay: 600ms;
}
.line:nth-of-type(7) { -webkit-transform: rotate(70deg); -moz-transform: rotate(70deg); -ms-transform: rotate(70deg); -o-transform: rotate(70deg); transform: rotate(70deg);
}
.line:nth-of-type(7):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 700ms; -moz-animation-delay: 700ms; animation-delay: 700ms;
}
.line:nth-of-type(8) { -webkit-transform: rotate(80deg); -moz-transform: rotate(80deg); -ms-transform: rotate(80deg); -o-transform: rotate(80deg); transform: rotate(80deg);
}
.line:nth-of-type(8):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 800ms; -moz-animation-delay: 800ms; animation-delay: 800ms;
}
.line:nth-of-type(9) { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);
}
.line:nth-of-type(9):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 900ms; -moz-animation-delay: 900ms; animation-delay: 900ms;
}
.line:nth-of-type(10) { -webkit-transform: rotate(100deg); -moz-transform: rotate(100deg); -ms-transform: rotate(100deg); -o-transform: rotate(100deg); transform: rotate(100deg);
}
.line:nth-of-type(10):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 1000ms; -moz-animation-delay: 1000ms; animation-delay: 1000ms;
}
.line:nth-of-type(11) { -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg);
}
.line:nth-of-type(11):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 1100ms; -moz-animation-delay: 1100ms; animation-delay: 1100ms;
}
.line:nth-of-type(12) { -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg);
}
.line:nth-of-type(12):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 1200ms; -moz-animation-delay: 1200ms; animation-delay: 1200ms;
}
.line:nth-of-type(13) { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg);
}
.line:nth-of-type(13):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 1300ms; -moz-animation-delay: 1300ms; animation-delay: 1300ms;
}
.line:nth-of-type(14) { -webkit-transform: rotate(140deg); -moz-transform: rotate(140deg); -ms-transform: rotate(140deg); -o-transform: rotate(140deg); transform: rotate(140deg);
}
.line:nth-of-type(14):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 1400ms; -moz-animation-delay: 1400ms; animation-delay: 1400ms;
}
.line:nth-of-type(15) { -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -o-transform: rotate(150deg); transform: rotate(150deg);
}
.line:nth-of-type(15):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 1500ms; -moz-animation-delay: 1500ms; animation-delay: 1500ms;
}
.line:nth-of-type(16) { -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); -ms-transform: rotate(160deg); -o-transform: rotate(160deg); transform: rotate(160deg);
}
.line:nth-of-type(16):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 1600ms; -moz-animation-delay: 1600ms; animation-delay: 1600ms;
}
.line:nth-of-type(17) { -webkit-transform: rotate(170deg); -moz-transform: rotate(170deg); -ms-transform: rotate(170deg); -o-transform: rotate(170deg); transform: rotate(170deg);
}
.line:nth-of-type(17):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 1700ms; -moz-animation-delay: 1700ms; animation-delay: 1700ms;
}
.line:nth-of-type(18) { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);
}
.line:nth-of-type(18):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 1800ms; -moz-animation-delay: 1800ms; animation-delay: 1800ms;
}
.line:nth-of-type(19) { -webkit-transform: rotate(190deg); -moz-transform: rotate(190deg); -ms-transform: rotate(190deg); -o-transform: rotate(190deg); transform: rotate(190deg);
}
.line:nth-of-type(19):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 1900ms; -moz-animation-delay: 1900ms; animation-delay: 1900ms;
}
.line:nth-of-type(20) { -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); -ms-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg);
}
.line:nth-of-type(20):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 2000ms; -moz-animation-delay: 2000ms; animation-delay: 2000ms;
}
.line:nth-of-type(21) { -webkit-transform: rotate(210deg); -moz-transform: rotate(210deg); -ms-transform: rotate(210deg); -o-transform: rotate(210deg); transform: rotate(210deg);
}
.line:nth-of-type(21):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 2100ms; -moz-animation-delay: 2100ms; animation-delay: 2100ms;
}
.line:nth-of-type(22) { -webkit-transform: rotate(220deg); -moz-transform: rotate(220deg); -ms-transform: rotate(220deg); -o-transform: rotate(220deg); transform: rotate(220deg);
}
.line:nth-of-type(22):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 2200ms; -moz-animation-delay: 2200ms; animation-delay: 2200ms;
}
.line:nth-of-type(23) { -webkit-transform: rotate(230deg); -moz-transform: rotate(230deg); -ms-transform: rotate(230deg); -o-transform: rotate(230deg); transform: rotate(230deg);
}
.line:nth-of-type(23):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 2300ms; -moz-animation-delay: 2300ms; animation-delay: 2300ms;
}
.line:nth-of-type(24) { -webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg);
}
.line:nth-of-type(24):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 2400ms; -moz-animation-delay: 2400ms; animation-delay: 2400ms;
}
.line:nth-of-type(25) { -webkit-transform: rotate(250deg); -moz-transform: rotate(250deg); -ms-transform: rotate(250deg); -o-transform: rotate(250deg); transform: rotate(250deg);
}
.line:nth-of-type(25):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 2500ms; -moz-animation-delay: 2500ms; animation-delay: 2500ms;
}
.line:nth-of-type(26) { -webkit-transform: rotate(260deg); -moz-transform: rotate(260deg); -ms-transform: rotate(260deg); -o-transform: rotate(260deg); transform: rotate(260deg);
}
.line:nth-of-type(26):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 2600ms; -moz-animation-delay: 2600ms; animation-delay: 2600ms;
}
.line:nth-of-type(27) { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg);
}
.line:nth-of-type(27):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 2700ms; -moz-animation-delay: 2700ms; animation-delay: 2700ms;
}
.line:nth-of-type(28) { -webkit-transform: rotate(280deg); -moz-transform: rotate(280deg); -ms-transform: rotate(280deg); -o-transform: rotate(280deg); transform: rotate(280deg);
}
.line:nth-of-type(28):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 2800ms; -moz-animation-delay: 2800ms; animation-delay: 2800ms;
}
.line:nth-of-type(29) { -webkit-transform: rotate(290deg); -moz-transform: rotate(290deg); -ms-transform: rotate(290deg); -o-transform: rotate(290deg); transform: rotate(290deg);
}
.line:nth-of-type(29):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 2900ms; -moz-animation-delay: 2900ms; animation-delay: 2900ms;
}
.line:nth-of-type(30) { -webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg);
}
.line:nth-of-type(30):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 3000ms; -moz-animation-delay: 3000ms; animation-delay: 3000ms;
}
.line:nth-of-type(31) { -webkit-transform: rotate(310deg); -moz-transform: rotate(310deg); -ms-transform: rotate(310deg); -o-transform: rotate(310deg); transform: rotate(310deg);
}
.line:nth-of-type(31):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 3100ms; -moz-animation-delay: 3100ms; animation-delay: 3100ms;
}
.line:nth-of-type(32) { -webkit-transform: rotate(320deg); -moz-transform: rotate(320deg); -ms-transform: rotate(320deg); -o-transform: rotate(320deg); transform: rotate(320deg);
}
.line:nth-of-type(32):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 3200ms; -moz-animation-delay: 3200ms; animation-delay: 3200ms;
}
.line:nth-of-type(33) { -webkit-transform: rotate(330deg); -moz-transform: rotate(330deg); -ms-transform: rotate(330deg); -o-transform: rotate(330deg); transform: rotate(330deg);
}
.line:nth-of-type(33):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 3300ms; -moz-animation-delay: 3300ms; animation-delay: 3300ms;
}
.line:nth-of-type(34) { -webkit-transform: rotate(340deg); -moz-transform: rotate(340deg); -ms-transform: rotate(340deg); -o-transform: rotate(340deg); transform: rotate(340deg);
}
.line:nth-of-type(34):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 3400ms; -moz-animation-delay: 3400ms; animation-delay: 3400ms;
}
.line:nth-of-type(35) { -webkit-transform: rotate(350deg); -moz-transform: rotate(350deg); -ms-transform: rotate(350deg); -o-transform: rotate(350deg); transform: rotate(350deg);
}
.line:nth-of-type(35):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 3500ms; -moz-animation-delay: 3500ms; animation-delay: 3500ms;
}
.line:nth-of-type(36) { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg);
}
.line:nth-of-type(36):after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: grow 3.6s ease-in infinite forwards; -moz-animation: grow 3.6s ease-in infinite forwards; animation: grow 3.6s ease-in infinite forwards; -webkit-animation-delay: 3600ms; -moz-animation-delay: 3600ms; animation-delay: 3600ms;
}
Wave Lines - Script Codes JS Codes
/*
Spinner based off Dave Whyte's shot on Dribbble.
https://dribbble.com/shots/1669937-Spinner
*/
| Developer | Michael Hobizal |
| Username | mikehobizal |
| Uploaded | January 05, 2023 |
| Rating | 4 |
| Size | 4,023 Kb |
| Views | 16,184 |
Do you need developer help for Wave Lines?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Michael Hobizal (mikehobizal) Script Codes
| Name | Size |
| Triangles Loader | 2,603 Kb |
| Mouse Transform Effects | 3,635 Kb |
| Happy Holidays CSS | 19,478 Kb |
| Jellyfish | 4,178 Kb |
| CSS Confetti Hover | 3,270 Kb |
| CSS Chart with clip-path | 3,524 Kb |
| CSS Ellipses Animation | 2,733 Kb |
| Chaos | 12,607 Kb |
| Mobile Download Links | 5,257 Kb |
| CSS Letter Animation | 5,812 Kb |
Create amazing art & images with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Barber Shop | Bhlaird | 6,270 Kb |
| ECharts Version 3.0 - Bar Marker Chart | WebCodePro | 2,726 Kb |
| AngularJS Animated Todo List | Ehaase | 2,975 Kb |
| Simple blog concept | Drew_mc | 2,666 Kb |
| Transitioning application screens with semantically named classes | Djgrant | 3,697 Kb |
| Material design buttons | Fischaela | 4,381 Kb |
| CSS background-size - GSAP | Jonathan | 2,209 Kb |
| A Pen by tugce | Ecgutcnkr | 4,197 Kb |
| Portfolio Page | KaylaMT | 1,983 Kb |
| CSS3 Diamond | Rendro | 1,960 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!