HTML是網頁開發中必不可少的一部分,其中文字動畫效果更是讓網頁更加生動活潑。下面是一些常見的文字動畫效果的HTML代碼。
/* 1. 文字下落效果 */ <style> .falling-text { position: relative; animation: fall 2s linear forwards; } @keyframes fall { 0% { top: -100px; opacity: 1; } 100% { top: 50%; opacity: 0; } } </style> <div class="falling-text">這是一段文字</div> /* 2. 打字機效果 */ <style> .typewriter-text { overflow: hidden; border-right: .15em solid orange; white-space: nowrap; margin: 0 auto; letter-spacing: .15em; animation: typing 3.5s steps(30, end), blink-caret .75s step-end infinite; } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: orange } } </style> <div class="typewriter-text">這是一段文字</div> /* 3. 文字漸顯效果 */ <style> .fade-in-text { opacity: 0; animation: fadeIn 3s ease-in-out forwards; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } </style> <div class="fade-in-text">這是一段文字</div>
上一篇mysql取得當天時間戳
下一篇html 文字 閃爍代碼