Wave Text - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Wave Text</title>
 <style>
 body {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: #282c34;
 color: #61dafb;
 font-family: 'Arial', sans-serif;
 font-size: 2em;
 }
 .wave-text {
 display: inline-block;
 }
 .wave-text span {
 display: inline-block;
 animation: wave 1.5s infinite;
 }
 .wave-text span:nth-child(odd) {
 animation-delay: 0s;
 }
 .wave-text span:nth-child(even) {
 animation-delay: 0.75s;
 }
 @keyframes wave {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-15px); }
 }
 </style>
</head>
<body>
 <div class="wave-text">
 Waving Text 🌊
 </div>
</body>
</html>