CSS3 div抖動(dòng)是一種非?？犰诺男Ч?，可以為頁面增添更多的動(dòng)感和趣味性。下面來看一下如何實(shí)現(xiàn)這種效果。

<div class="shake">抖動(dòng)效果</div>
.shake{
animation: shake 1s ease-in-out infinite;
}
@keyframes shake{
0% { transform: translate(0px, 0px) rotate(0deg); }
25% { transform: translate(-5px, 5px) rotate(-5deg); }
50% { transform: translate(0px, 10px) rotate(0deg); }
75% { transform: translate(5px, 5px) rotate(5deg); } 
100% { transform: translate(0px, 0px) rotate(0deg); } 
}

首先，在HTML中創(chuàng)建一個(gè)div，加上class名為“shake”，然后在CSS中設(shè)置animation屬性，指定“shake”動(dòng)畫，以及動(dòng)畫的效果時(shí)間、緩動(dòng)效果和重復(fù)次數(shù)。

接下來，在CSS中定義一個(gè)@keyframes動(dòng)畫，其中包含了不同狀態(tài)下div的位置和角度，需要注意的是帶有translate和rotate屬性，用于改變div的位置與角度。

最后，運(yùn)行代碼，就可以看到一個(gè)抖動(dòng)效果的div出現(xiàn)在頁面上啦！