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即可實現無限抖動的效果。
上一篇mysql查詢商品詳情
下一篇css3曲線導航