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>
這樣就可以讓我們的元素自動在頁面中進行抖動了!
下一篇mysql數據庫外連