CSS Waves

Developer
Tyler Moeller
Size
2,228 Kb
Views
36,432
  1. CSS Waves Previews
  2. CSS Waves HTML Codes
  3. CSS Waves CSS Codes
  4. CSS Waves JS Codes

How do I make an css waves?

Based on http://codepen.io/andyfitz/pen/akAKdV. What is a css waves? How do you make a css waves? This script and codes were developed by Tyler Moeller on 06 November 2022, Sunday.

CSS Waves Previews
IQ Test

CSS Waves - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Waves</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg class="waves" xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none"> <defs> <path id="wave" d="m -160,44.4 c 30,0 58,-18 87.7,-18 30.3,0 58.3,18 87.3,18 30,0 58,-18 88,-18 30,0 58,18 88,18 l 0,34.5 -351,0 z" /> </defs> <g class="xlinks"> <use class="slow" xlink:href="#wave" x="50" y="0" fill="#2196f3"/> <use class="medium" xlink:href="#wave" x="50" y="3" fill="#1976d2"/> <use class="fast" xlink:href="#wave" x="50" y="6" fill="#0d47a1"/> </g>
</svg>
<div class="water"></div> <script src="js/index.js"></script>
</body>
</html>

CSS Waves - Script Codes CSS Codes

body { background: #a2e0f9; background: -webkit-gradient(linear, left top, right bottom, color-stop(6%, #a2e0f9), color-stop(39%, #cef5fc), color-stop(70%, #eafaeb), color-stop(88%, #fefcd3), color-stop(100%, #fdf4ba)); background: -webkit-linear-gradient(-45deg, #a2e0f9 6%, #cef5fc 39%, #eafaeb 70%, #fefcd3 88%, #fdf4ba 100%); background: -webkit-linear-gradient(315deg, #a2e0f9 6%, #cef5fc 39%, #eafaeb 70%, #fefcd3 88%, #fdf4ba 100%); background: linear-gradient(135deg, #a2e0f9 6%, #cef5fc 39%, #eafaeb 70%, #fefcd3 88%, #fdf4ba 100%); height: 100%; margin: 0; min-width: 280px; overflow-y: hidden; padding-top: 180px;
}
.slow,
.medium,
.fast { -webkit-animation: move-forever 12s linear infinite; animation: move-forever 12s linear infinite; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;
}
.slow { -webkit-animation-delay: -4s; animation-delay: -4s;
}
.medium { -webkit-animation-delay: -4s; animation-delay: -4s; -webkit-animation-duration: 8s; animation-duration: 8s
}
.fast { -webkit-animation-delay: -8s; animation-delay: -8s; -webkit-animation-duration: 4s; animation-duration: 4s
}
@-webkit-keyframes move-forever { 0% { -webkit-transform: translate(-90px, 0%); transform: translate(-90px, 0%) } 100% { -webkit-transform: translate(85px, 0%); transform: translate(85px, 0%) }
}
@keyframes move-forever { 0% { -webkit-transform: translate(-90px, 0%); transform: translate(-90px, 0%) } 100% { -webkit-transform: translate(85px, 0%); transform: translate(85px, 0%) }
}
.waves { display: block;
}
.water { background-color: #0d47a1; min-height: 85vh;
}

CSS Waves - Script Codes JS Codes

/* Based on https://codepen.io/andyfitz/pen/akAKdV */
CSS Waves - Script Codes
CSS Waves - Script Codes
Home Page Home
Developer Tyler Moeller
Username TylerMoeller
Uploaded November 06, 2022
Rating 3
Size 2,228 Kb
Views 36,432
Do you need developer help for CSS Waves?

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!

Tyler Moeller (TylerMoeller) Script Codes
Name
Twitch JSON API Example
Navigator.geolocation fallback to ip-based location
Boostrap Grid Examples
React Markdown Previewer
Local Weather App v1.0
Wikipedia Search Engine
NodeSchool Survey Example
Social Media Icons Animated on Hover
Tylermoeller.github.io
Build a Tribute Page
Create amazing sales emails 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!