Pure CSS Waves

Developer
Diéssica Gurskas
Size
3,446 Kb
Views
4,048
  1. Pure CSS Waves Previews
  2. Pure CSS Waves HTML Codes
  3. Pure CSS Waves CSS Codes

How do I make an pure css waves?

Waaaaaaaaaves! :-D. What is a pure css waves? How do you make a pure css waves? This script and codes were developed by Diéssica Gurskas on 10 January 2023, Tuesday.

Pure CSS Waves Previews
IQ Test

Pure CSS Waves - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Waves</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ div { display: inline-block;
}
.curve { margin-bottom: -50px;
}
.increase, .decrease { height: 8.5px; background: #c29d0b; width: 149.76px; margin-left: -89.85px; position: relative; z-index: 1;
}
.increase { transform: rotate(-38.4deg);
}
.decrease { transform: rotate(38.4deg); margin-left: -88.35px;
}
.peak, .valley { border: 9px solid transparent; border-top: 9px solid #c29d0b; border-radius: 50%; width: 140px; height: 105px;
}
.peak { transform: translate(-44px, 49.4px);
}
.valley { transform: rotate(180deg) translate(45px, -64.5px);
}
body { margin-top: -200px; background: #f1c40f; white-space: nowrap; overflow: hidden;
}
.showing { float: right; background: #f1c40f; width: 100%; height: 78px; animation: showing 5s ease-in-out infinite alternate; position: relative; z-index: 2;
}
@keyframes showing { 0% { transform: translateX(0%); } 100% { transform: translateX(150%); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section class='curve perspective'></section>
<div class='showing'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<section class='curve perspective'></section>
<div class='showing'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<section class='curve perspective'></section>
<div class='showing'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<section class='curve perspective'></section>
<div class='showing'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<section class='curve perspective'></section>
<div class='showing'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<section class='curve perspective'></section>
<div class='showing'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<section class='curve perspective'></section>
<div class='showing'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<section class='curve perspective'></section>
<div class='showing'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<section class='curve perspective'></section>
<div class='showing'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<section class='curve perspective'></section>
<div class='showing'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<section class='curve perspective'></section>
<div class='showing'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<section class='curve perspective'></section>
<div class='showing'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<section class='curve perspective'></section>
<div class='showing'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<section class='curve perspective'></section>
<div class='showing'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<section class='curve perspective'></section>
<div class='showing'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<section class='curve perspective'></section>
<div class='showing'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<section class='curve perspective'></section>
<div class='showing'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<section class='curve perspective'></section>
<div class='showing'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<section class='curve perspective'></section>
<div class='showing'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<section class='curve perspective'></section>
<div class='showing'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
<div class='increase'></div>
<div class='peak'></div>
<div class='decrease'></div>
<div class='valley'></div>
</body>
</html>

Pure CSS Waves - Script Codes CSS Codes

div { display: inline-block;
}
.curve { margin-bottom: -50px;
}
.increase, .decrease { height: 8.5px; background: #c29d0b; width: 149.76px; margin-left: -89.85px; position: relative; z-index: 1;
}
.increase { transform: rotate(-38.4deg);
}
.decrease { transform: rotate(38.4deg); margin-left: -88.35px;
}
.peak, .valley { border: 9px solid transparent; border-top: 9px solid #c29d0b; border-radius: 50%; width: 140px; height: 105px;
}
.peak { transform: translate(-44px, 49.4px);
}
.valley { transform: rotate(180deg) translate(45px, -64.5px);
}
body { margin-top: -200px; background: #f1c40f; white-space: nowrap; overflow: hidden;
}
.showing { float: right; background: #f1c40f; width: 100%; height: 78px; animation: showing 5s ease-in-out infinite alternate; position: relative; z-index: 2;
}
@keyframes showing { 0% { transform: translateX(0%); } 100% { transform: translateX(150%); }
}
Pure CSS Waves - Script Codes
Pure CSS Waves - Script Codes
Home Page Home
Developer Diéssica Gurskas
Username diessica
Uploaded January 10, 2023
Rating 3.5
Size 3,446 Kb
Views 4,048
Do you need developer help for Pure 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!

Diéssica Gurskas (diessica) Script Codes
Name
CSS Sine Waves
Colunas de mesma altura
Floating labels with CSS only
How checkbox hack works
CSS is incredibly awesome
CSS Lasers
A CSS curve
Hover to show the text
Tooltip with title attribute
Git logo with CSS
Create amazing captions 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!