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

css3無限抖動

傅智翔2年前11瀏覽0評論

CSS3是前端開發中重要的技術之一,它可以為網頁增加各種驚艷的效果,其中無限抖動是一種常見的動畫效果。

無限抖動可以通過CSS3中的關鍵幀動畫來實現,首先需要定義抖動的關鍵幀:

@keyframes shake {
0% {
transform: translate(0, 0);
}
20% {
transform: translate(-10px, 0);
}
30% {
transform: translate(10px, 0);
}
50% {
transform: translate(-10px, 0);
}
60% {
transform: translate(10px, 0);
}
100% {
transform: translate(0, 0);
}
}

上述代碼中,我們定義了一個關鍵幀動畫shake,包含6個關鍵幀,每個關鍵幀的transform樣式有所不同,實現了左右抖動的效果。

接下來,我們將該關鍵幀應用到需要抖動的元素上:

.shake {
animation: shake 1s infinite;
}

這段代碼指定了引用的關鍵幀動畫為shake,持續時間為1秒,無限循環。

最后,只需要在需要抖動的元素上加上類名shake即可實現無限抖動的效果。