在CSS3中，我們可以通過使用@keyframes規(guī)則來創(chuàng)建動(dòng)畫，從而實(shí)現(xiàn)圖標(biāo)的震動(dòng)效果，以下是一個(gè)簡單的示例，展示了如何使用CSS3使圖標(biāo)震動(dòng)：

1、定義動(dòng)畫：

我們需要定義一個(gè)動(dòng)畫，這個(gè)動(dòng)畫將描述圖標(biāo)從中心移動(dòng)到邊緣，然后再返回中心的過程，這個(gè)過程可以看作是一個(gè)“震動(dòng)”。

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(0); }
  75% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

2、應(yīng)用動(dòng)畫到圖標(biāo)：

我們將這個(gè)動(dòng)畫應(yīng)用到圖標(biāo)上，我們可以使用animation屬性來指定動(dòng)畫的名稱、持續(xù)時(shí)間、延遲時(shí)間等參數(shù)。

.icon {
  animation: shake 0.5s infinite;
}

在這個(gè)示例中，我們假設(shè)圖標(biāo)有一個(gè)類名為icon，我們將shake動(dòng)畫應(yīng)用到這個(gè)圖標(biāo)上，并設(shè)置動(dòng)畫的持續(xù)時(shí)間為0.5秒，以及設(shè)置為無限循環(huán)。

3、樣式和布局：

為了使圖標(biāo)能夠正常顯示并震動(dòng)，我們需要確保它有足夠的空間來移動(dòng)，我們可以使用CSS的position屬性來定位圖標(biāo)，并設(shè)置合適的width和height屬性。

.icon {
  position: relative;
  width: 50px;
  height: 50px;
}

當(dāng)頁面加載時(shí)，圖標(biāo)將會(huì)開始震動(dòng)，你可以根據(jù)需要調(diào)整動(dòng)畫的參數(shù)和樣式，以達(dá)到不同的效果。