Interactive Div Text
Home
Snippets
Interactive Div Text
HTML
CSS
JS
<div class="wavy-text"> <span>W</span> <span>A</span> <span>V</span> <span>E</span> <span>S</span> </div>
body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #6a11cb, #2575fc); font-family: Arial, sans-serif; color: #fff; overflow: hidden; } .wavy-text { font-size: 4rem; font-weight: bold; display: flex; gap: 5px; } .wavy-text span { display: inline-block; animation: wave 1.5s infinite ease-in-out; } .wavy-text span:nth-child(1) { animation-delay: 0s; } .wavy-text span:nth-child(2) { animation-delay: 0.2s; } .wavy-text span:nth-child(3) { animation-delay: 0.4s; } .wavy-text span:nth-child(4) { animation-delay: 0.6s; } .wavy-text span:nth-child(5) { animation-delay: 0.8s; } .wavy-text span:nth-child(6) { animation-delay: 1.0s; } .wavy-text span:nth-child(7) { animation-delay: 1.2s; } @keyframes wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-35px); } }
//JavaScript
Ad #1
Ad #2
Scroll to Top