在網(wǎng)頁(yè)設(shè)計(jì)中，文字上下抖動(dòng)效果是一種動(dòng)感十足的設(shè)計(jì)元素。通過(guò)使用CSS實(shí)現(xiàn)文字上下抖動(dòng)效果，可以為網(wǎng)頁(yè)增添一份趣味性和活力。下面我們來(lái)看一下如何使用CSS來(lái)實(shí)現(xiàn)文字上下抖動(dòng)效果。

.shake {
position: relative; /* 設(shè)置相對(duì)定位 */
animation: shake 0.8s ease-in-out infinite; /* 設(shè)置動(dòng)畫效果 */
}
@keyframes shake {
0% {
top: 0; /* 初始位置 */
opacity: 1; /* 初始透明度 */
}
50% {
top: 5px; /* 中間位置 */
opacity: 0.5; /* 中間透明度 */
}
100% {
top: 0; /* 結(jié)束位置 */
opacity: 1; /* 結(jié)束透明度 */
}
}

首先，我們添加一個(gè)class名為“shake”的樣式，將其設(shè)置為相對(duì)定位（position: relative;），并使用animation屬性添加抖動(dòng)動(dòng)畫，將其設(shè)置為shake動(dòng)畫，動(dòng)畫時(shí)長(zhǎng)為0.8秒，時(shí)間函數(shù)為ease-in-out，并設(shè)置為無(wú)限循環(huán)。

接著，在@keyframes中定義shake動(dòng)畫，分別在動(dòng)畫的0%、50%和100%時(shí)間點(diǎn)設(shè)置不同的位置和透明度。在0%時(shí)間點(diǎn)，文字的top值為0，即初始位置，透明度為1。在50%時(shí)間點(diǎn)，文字的top值為5px，透明度為0.5。在100%時(shí)間點(diǎn)，文字的top值又回到了0，透明度也回到了1。

最后，將class名為“shake”的樣式應(yīng)用于需要實(shí)現(xiàn)抖動(dòng)效果的文字上即可。