|
https://alvarotrigo.com/blog/css-text-animations/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento senza titolo</title> <style> @import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap'); * { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: #151719; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .waviy { position: relative; -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2)); font-size: 60px; } .waviy span { font-family: 'Alfa Slab One', cursive; position: relative; display: inline-block; color: #fff; text-transform: uppercase; animation: waviy 1s infinite; animation-delay: calc(.1s * var(--i)); } @keyframes waviy { 0%,40%,100% { transform: translateY(0) } 20% { transform: translateY(-20px) } } </style> <body> <div class="waviy"> <span style="--i:1">Z</span> <span style="--i:2">I</span> <span style="--i:3">Y</span> <span style="--i:4">O</span> <span style="--i:5">V</span> <span style="--i:6">U</span> <span style="--i:7">D</span> <span style="--i:8">D</span> <span style="--i:9">I</span> <span style="--i:10">N</span> </div> </body> </html> |