欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css定時自動抖動效果

江奕云2年前12瀏覽0評論

CSS定時自動抖動效果能夠給網頁添加一些動態的元素,使得網站更加有趣。它的實現方法非常簡單,只需要用到CSS3的動畫屬性。

.shake {
animation: shake 1s ease-in-out infinite;
}
@keyframes shake {
0% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90%, 100% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
}

以上代碼實現了一個抖動動畫效果。通過給一個元素添加class “shake” ,這個元素就能夠自動開始抖動了。

代碼解析:

1).shake {}:選擇器用于選中需要添加抖動效果的元素。

2)animation: shake 1s ease-in-out infinite;:這行代碼設置了動畫的名稱(shake),動畫時長(1s),時間函數(ease-in-out),以及動畫重復次數(infinite)。

3)@keyframes shake {}:通過@keyframes 創建一個動畫規則。

4)0% { transform: translateX(0); }:設置動畫初始狀態,即不進行任何變換。

5)10%, 30%, 50%, 70%, 90%, 100% { transform: translateX(-10px); }:動畫抖動的核心,這句代碼將元素在X軸上向左移動10px,實現抖動效果。

6)20%, 40%, 60%, 80% { transform: translateX(10px); }:將元素在 X 軸上向右移動10px。

最后,我們需要將這個類添加到要抖動的元素上,例如:

<div class="shake">
這里是要添加抖動效果的元素
</div>

這樣就可以讓我們的元素自動在頁面中進行抖動了!