實(shí)現(xiàn)div抖動(dòng)的CSS技巧

在CSS中，我們可以使用@keyframes規(guī)則來創(chuàng)建動(dòng)畫，從而實(shí)現(xiàn)div的抖動(dòng)效果，下面是一個(gè)簡單的示例：

1、定義一個(gè)名為shake的動(dòng)畫：

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

2、將這個(gè)動(dòng)畫應(yīng)用到需要抖動(dòng)的div上：

div.shake:hover {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}

在這個(gè)示例中，當(dāng)鼠標(biāo)懸停在div上時(shí)，div會(huì)開始抖動(dòng)。@keyframes規(guī)則定義了抖動(dòng)的路徑和速度，而animation屬性則控制了動(dòng)畫的播放時(shí)間和次數(shù)，你可以根據(jù)自己的需求來調(diào)整這些參數(shù)。