Wavy thing
How do I make an wavy thing?
Just a wavy thing. What is a wavy thing? How do you make a wavy thing? This script and codes were developed by Godje on 12 September 2022, Monday.
Wavy thing - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wavy thing</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav id="preloader"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
</nav> <script src="js/index.js"></script>
</body>
</html>
Wavy thing - Script Codes CSS Codes
* { box-sizing: border-box;
}
body { background-image: -webkit-linear-gradient(55deg, #e96443, #904e95); background-image: linear-gradient(35deg, #e96443, #904e95); width: 100vw; height: 100vh;
}
#preloader { width: 100vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100vh;
}
#preloader > li { float: left; display: block; width: 0.8vh; height: 50vh; background-image: -webkit-linear-gradient(top, white 50%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.2)); background-image: linear-gradient(180deg, white 50%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.2)); border-radius: 0.4vh; -webkit-animation: wave 1.2s infinite; animation: wave 1.2s infinite; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
}
#preloader > li:nth-child(1) { -webkit-animation-delay: 0.007s; animation-delay: 0.007s;
}
#preloader > li:nth-child(2) { -webkit-animation-delay: 0.014s; animation-delay: 0.014s;
}
#preloader > li:nth-child(3) { -webkit-animation-delay: 0.021s; animation-delay: 0.021s;
}
#preloader > li:nth-child(4) { -webkit-animation-delay: 0.028s; animation-delay: 0.028s;
}
#preloader > li:nth-child(5) { -webkit-animation-delay: 0.035s; animation-delay: 0.035s;
}
#preloader > li:nth-child(6) { -webkit-animation-delay: 0.042s; animation-delay: 0.042s;
}
#preloader > li:nth-child(7) { -webkit-animation-delay: 0.049s; animation-delay: 0.049s;
}
#preloader > li:nth-child(8) { -webkit-animation-delay: 0.056s; animation-delay: 0.056s;
}
#preloader > li:nth-child(9) { -webkit-animation-delay: 0.063s; animation-delay: 0.063s;
}
#preloader > li:nth-child(10) { -webkit-animation-delay: 0.07s; animation-delay: 0.07s;
}
#preloader > li:nth-child(11) { -webkit-animation-delay: 0.077s; animation-delay: 0.077s;
}
#preloader > li:nth-child(12) { -webkit-animation-delay: 0.084s; animation-delay: 0.084s;
}
#preloader > li:nth-child(13) { -webkit-animation-delay: 0.091s; animation-delay: 0.091s;
}
#preloader > li:nth-child(14) { -webkit-animation-delay: 0.098s; animation-delay: 0.098s;
}
#preloader > li:nth-child(15) { -webkit-animation-delay: 0.105s; animation-delay: 0.105s;
}
#preloader > li:nth-child(16) { -webkit-animation-delay: 0.112s; animation-delay: 0.112s;
}
#preloader > li:nth-child(17) { -webkit-animation-delay: 0.119s; animation-delay: 0.119s;
}
#preloader > li:nth-child(18) { -webkit-animation-delay: 0.126s; animation-delay: 0.126s;
}
#preloader > li:nth-child(19) { -webkit-animation-delay: 0.133s; animation-delay: 0.133s;
}
#preloader > li:nth-child(20) { -webkit-animation-delay: 0.14s; animation-delay: 0.14s;
}
#preloader > li:nth-child(21) { -webkit-animation-delay: 0.147s; animation-delay: 0.147s;
}
#preloader > li:nth-child(22) { -webkit-animation-delay: 0.154s; animation-delay: 0.154s;
}
#preloader > li:nth-child(23) { -webkit-animation-delay: 0.161s; animation-delay: 0.161s;
}
#preloader > li:nth-child(24) { -webkit-animation-delay: 0.168s; animation-delay: 0.168s;
}
#preloader > li:nth-child(25) { -webkit-animation-delay: 0.175s; animation-delay: 0.175s;
}
#preloader > li:nth-child(26) { -webkit-animation-delay: 0.182s; animation-delay: 0.182s;
}
#preloader > li:nth-child(27) { -webkit-animation-delay: 0.189s; animation-delay: 0.189s;
}
#preloader > li:nth-child(28) { -webkit-animation-delay: 0.196s; animation-delay: 0.196s;
}
#preloader > li:nth-child(29) { -webkit-animation-delay: 0.203s; animation-delay: 0.203s;
}
#preloader > li:nth-child(30) { -webkit-animation-delay: 0.21s; animation-delay: 0.21s;
}
#preloader > li:nth-child(31) { -webkit-animation-delay: 0.217s; animation-delay: 0.217s;
}
#preloader > li:nth-child(32) { -webkit-animation-delay: 0.224s; animation-delay: 0.224s;
}
#preloader > li:nth-child(33) { -webkit-animation-delay: 0.231s; animation-delay: 0.231s;
}
#preloader > li:nth-child(34) { -webkit-animation-delay: 0.238s; animation-delay: 0.238s;
}
#preloader > li:nth-child(35) { -webkit-animation-delay: 0.245s; animation-delay: 0.245s;
}
#preloader > li:nth-child(36) { -webkit-animation-delay: 0.252s; animation-delay: 0.252s;
}
#preloader > li:nth-child(37) { -webkit-animation-delay: 0.259s; animation-delay: 0.259s;
}
#preloader > li:nth-child(38) { -webkit-animation-delay: 0.266s; animation-delay: 0.266s;
}
#preloader > li:nth-child(39) { -webkit-animation-delay: 0.273s; animation-delay: 0.273s;
}
#preloader > li:nth-child(40) { -webkit-animation-delay: 0.28s; animation-delay: 0.28s;
}
#preloader > li:nth-child(41) { -webkit-animation-delay: 0.287s; animation-delay: 0.287s;
}
#preloader > li:nth-child(42) { -webkit-animation-delay: 0.294s; animation-delay: 0.294s;
}
#preloader > li:nth-child(43) { -webkit-animation-delay: 0.301s; animation-delay: 0.301s;
}
#preloader > li:nth-child(44) { -webkit-animation-delay: 0.308s; animation-delay: 0.308s;
}
#preloader > li:nth-child(45) { -webkit-animation-delay: 0.315s; animation-delay: 0.315s;
}
#preloader > li:nth-child(46) { -webkit-animation-delay: 0.322s; animation-delay: 0.322s;
}
#preloader > li:nth-child(47) { -webkit-animation-delay: 0.329s; animation-delay: 0.329s;
}
#preloader > li:nth-child(48) { -webkit-animation-delay: 0.336s; animation-delay: 0.336s;
}
#preloader > li:nth-child(49) { -webkit-animation-delay: 0.343s; animation-delay: 0.343s;
}
#preloader > li:nth-child(50) { -webkit-animation-delay: 0.35s; animation-delay: 0.35s;
}
#preloader > li:nth-child(51) { -webkit-animation-delay: 0.357s; animation-delay: 0.357s;
}
#preloader > li:nth-child(52) { -webkit-animation-delay: 0.364s; animation-delay: 0.364s;
}
#preloader > li:nth-child(53) { -webkit-animation-delay: 0.371s; animation-delay: 0.371s;
}
#preloader > li:nth-child(54) { -webkit-animation-delay: 0.378s; animation-delay: 0.378s;
}
#preloader > li:nth-child(55) { -webkit-animation-delay: 0.385s; animation-delay: 0.385s;
}
#preloader > li:nth-child(56) { -webkit-animation-delay: 0.392s; animation-delay: 0.392s;
}
#preloader > li:nth-child(57) { -webkit-animation-delay: 0.399s; animation-delay: 0.399s;
}
#preloader > li:nth-child(58) { -webkit-animation-delay: 0.406s; animation-delay: 0.406s;
}
#preloader > li:nth-child(59) { -webkit-animation-delay: 0.413s; animation-delay: 0.413s;
}
#preloader > li:nth-child(60) { -webkit-animation-delay: 0.42s; animation-delay: 0.42s;
}
@-webkit-keyframes wave { 50% { height: 100vh; }
}
@keyframes wave { 50% { height: 100vh; }
}
Wavy thing - Script Codes JS Codes
//Nah... NO javascript
Developer | Godje |
Username | Godje |
Uploaded | September 12, 2022 |
Rating | 4.5 |
Size | 3,246 Kb |
Views | 34,408 |
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!
Name | Size |
Polar Roses | 3,924 Kb |
Archimedean Spiral | 3,688 Kb |
FIRE | 3,636 Kb |
Dot Digit Input | 4,156 Kb |
Cute carnival lights | 3,587 Kb |
Just SMILE | 3,098 Kb |
Just a simplest particle canvas | 2,454 Kb |
Ceasar Cipher Encryptor | 3,793 Kb |
Fancy Background shapes | 2,920 Kb |
Dark Spirit Fire | 3,792 Kb |
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!
Name | Username | Size |
Pure CSS read more toggle | Idered | 2,344 Kb |
How to add Css Fold Notes In Blogger By Askwithloud.com | Askwithloud | 2,280 Kb |
Flexbox Grid - equal height | DaveOrDead | 2,855 Kb |
CSS background-size - GSAP | Jonathan | 2,209 Kb |
Svg penguin | _massimo | 2,990 Kb |
Progressively reveal dots on a Bezier curve | GreenSock | 2,489 Kb |
Apple website | Jds317 | 1,835 Kb |
Scroll Arrow | Robooneus | 4,437 Kb |
Blog demo to use given styling | Andygirl | 2,412 Kb |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 Kb |
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!