效果
完整代码
HTML部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style></style> </head> <body> <div class="wave-text"> <span>W</span><span>a</span><span>v</span><span>e</span><span>s</span> </div> </body> </html>
CSS部分
.wave-text { font-size: 40px; margin:40px; font-weight: bold; } .wave-text span { display: inline-block; animation: wave 2s ease-in-out infinite; } @keyframes wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } /* 为每个字母设置不同的动画延迟 */ .wave-text span:nth-child(2) { animation-delay: 0.1s; } .wave-text span:nth-child(3) { animation-delay: 0.2s; } .wave-text span:nth-child(4) { animation-delay: 0.3s; } .wave-text span:nth-child(5) { animation-delay: 0.4s; }
