CSS是一種用于網(wǎng)頁(yè)設(shè)計(jì)的語(yǔ)言,可以通過(guò)它來(lái)設(shè)置網(wǎng)頁(yè)的樣式和布局。其中一種比較有趣的效果是讓一個(gè)div抖動(dòng)。下面介紹如何使用CSS來(lái)實(shí)現(xiàn)div抖動(dòng):
div { position: relative; animation: shake 0.5s; } @keyframes shake { 0% { left: 0; } 10% { left: -10px; } 20% { left: 10px; } 30% { left: -10px; } 40% { left: 10px; } 50% { left: -10px; } 60% { left: 10px; } 70% { left: -10px; } 80% { left: 10px; } 90% { left: -10px; } 100%{ left: 0; } }
首先,在CSS中定義需要抖動(dòng)的div,并設(shè)置其position為relative,這是為了讓后面的動(dòng)畫(huà)效果能夠生效。然后,在CSS的@keyframes關(guān)鍵字中定義抖動(dòng)動(dòng)畫(huà)的過(guò)程,使用left屬性來(lái)使div左右移動(dòng)。在動(dòng)畫(huà)過(guò)程中,通過(guò)10%、20%、30%等來(lái)控制div的左右移動(dòng),最后在100%時(shí)讓div回到原位置。最后,將動(dòng)畫(huà)效果添加到div的樣式中,通過(guò)animation屬性來(lái)引用剛定義的shake動(dòng)畫(huà)。
可以根據(jù)實(shí)際需要來(lái)調(diào)整動(dòng)畫(huà)的時(shí)間和左右移動(dòng)的距離,以達(dá)到想要的效果。