WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Pure CSS Waves
10445
webleb
Publish Your Code
Recommended
30 September 2025
CSS Sphere Animation with Hover Effects
18 September 2025
CSS Animation: Ghost Memory Fragment Effect
12 August 2025
CSS Heart Animation Code Snippet
index.html
Copy
Webleb
Pure CSS Waves
Add footer here
styles.css
Copy
@import url(//fonts.googleapis.com/css?family=Lato:300:400); body { margin:0; } h1 { font-family: 'Lato', sans-serif; font-weight:300; letter-spacing: 2px; font-size:48px; } p { font-family: 'Lato', sans-serif; letter-spacing: 1px; font-size:14px; color: #333333; } .header { position:relative; text-align:center; background: -webkit-linear-gradient(to right, #414345, #232526); background: linear-gradient(to right, #414345, #232526); color:white; } .logo { width:50px; fill:white; padding-right:15px; display:inline-block; vertical-align: middle; } .inner-header { height:65vh; width:100%; margin: 0; padding: 0; } .flex { /*Flexbox for containers*/ display: flex; justify-content: center; align-items: center; text-align: center; } .waves { position:relative; width: 100%; height:15vh; margin-bottom:-7px; min-height:100px; max-height:150px; } .content { position:relative; height:20vh; text-align:center; background-color: white; } /* Animation */ .parallax > use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } @keyframes move-forever { 0% { transform: translate3d(-90px,0,0); } 100% { transform: translate3d(85px,0,0); } } @media (max-width: 768px) { .waves { height:40px; min-height:40px; } .content { height:30vh; } h1 { font-size:24px; } }
main.js
Copy
Nothing to copy