日常開發中,我們可能需要給某個元素添加動畫效果,其中,左右擺動的動畫是比較常見的一種,但實現起來卻有點棘手。
在使用CSS實現左右擺動的動畫效果時,我們需要使用關鍵幀(@keyframes)來控制元素的運動方式。首先,我們需要給元素添加一個起始位置及其樣式,然后通過關鍵幀來指定元素每個時間點對應的位置和樣式,最后通過animation屬性將動畫應用到元素上。
/* 設置起始位置和樣式 */ div{ position: relative; left: 0px; } /* 定義關鍵幀 */ @keyframes shake{ 0% { left: 0px; } 20% { left: -10px; } 40% { left: 10px; } 60% { left: -10px; } 80% { left: 10px; } 100% { left: 0px; } } /* 應用動畫 */ div{ animation: shake 1s infinite; }
上面的代碼中,我們定義了一個shake關鍵幀,它包括了從0%到100%的動畫過程,每個時間點指定了元素相應的left值。最后通過animation屬性將該動畫應用到目標元素上,并設置了它的時間長度為1s,循環次數為無限。
通過以上方法,我們可以輕松實現一個簡單的左右擺動的動畫效果,并可以通過調整關鍵幀來控制元素擺動的快慢、幅度等參數。
上一篇css左右抖動
下一篇mysql數據庫亂碼問題