最近項目中要求鼠標經過字體出現抖動效果，這個效果可以用CSS輕松實現，接下來就來一起看看具體實現方法。

首先在CSS中定義要使用的字體以及字體大小：

font-family: Arial, sans-serif;
font-size: 36px;

然后我們需要定義一個新的關鍵幀動畫，這個動畫就是用來控制字體抖動的：

@keyframes jitter {
0% { transform: translate(0); }
10% { transform: translate(-2px, 2px); }
20% { transform: translate(-2px, -2px); }
30% { transform: translate(2px, 2px); }
40% { transform: translate(2px, -2px); }
50% { transform: translate(-2px, 2px); }
60% { transform: translate(-2px, -2px); }
70% { transform: translate(2px, 2px); }
80% { transform: translate(2px, -2px); }
90% { transform: translate(-2px, 2px); }
100% { transform: translate(0); }
}

這里我們定義了11個關鍵幀，每個關鍵幀都有一定的位移，最終會形成一個抖動的效果。

最后，我們需要將動畫應用在我們的元素上：

:hover {
animation: jitter 1s;
}

這里我們使用:hover來表示鼠標經過時觸發動畫，1s是動畫的完成時間。

這樣我們就通過CSS實現了一個鼠標經過字體抖動的效果。