色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css實現div抖動

錢良釵2年前11瀏覽0評論

CSS是一種用于網頁設計的語言,可以通過它來設置網頁的樣式和布局。其中一種比較有趣的效果是讓一個div抖動。下面介紹如何使用CSS來實現div抖動:

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中定義需要抖動的div,并設置其position為relative,這是為了讓后面的動畫效果能夠生效。然后,在CSS的@keyframes關鍵字中定義抖動動畫的過程,使用left屬性來使div左右移動。在動畫過程中,通過10%、20%、30%等來控制div的左右移動,最后在100%時讓div回到原位置。最后,將動畫效果添加到div的樣式中,通過animation屬性來引用剛定義的shake動畫。

可以根據實際需要來調整動畫的時間和左右移動的距離,以達到想要的效果。