在CSS中,我們可以通過使用@keyframes
規(guī)則來創(chuàng)建動畫,從而實(shí)現(xiàn)字體跳動的效果,以下是一個簡單的示例,展示如何制作一個會跳動的字體:
1、HTML部分:
<div class="jumping-text">我會跳動!</div>
2、CSS部分:
@keyframes jump { 0% { transform: translateY(0); } 50% { transform: translateY(-30px); } 100% { transform: translateY(0); } } .jumping-text { font-size: 2em; animation: jump 1s infinite; }
在這個示例中,我們定義了一個名為jump
的動畫,其中transform: translateY(0)
表示字體在動畫開始時位于其原始位置。transform: translateY(-30px)
表示字體在動畫中間點(diǎn)向下移動30像素。transform: translateY(0)
表示字體在動畫結(jié)束時回到其原始位置。
我們將這個動畫應(yīng)用到了.jumping-text
類上,并設(shè)置了動畫的持續(xù)時間為1秒,以及設(shè)置為無限循環(huán),你可以根據(jù)需要調(diào)整這些值,以達(dá)到不同的跳動效果。