CSS搖晃的桃子是一種有趣的特效,它可以讓元素在頁面上來回晃動,給用戶帶來獨特的視覺體驗。下面我們將通過一段CSS代碼來實現這個特效:
.peach { animation: shake 0.8s ease-in-out infinite alternate; } @keyframes shake { from { transform: translateX(-10px); } to { transform: translateX(10px); } }
以上代碼的作用是給一個class為"peach"的元素添加一個動畫,讓它來回搖晃。通過"@keyframes"關鍵字定義了一個名為"shake"的動畫,其中"from"和"to"分別表示動畫的起始和結束狀態,使用"transform"屬性來改變元素的位置。因為添加了"infinite"和"alternate"屬性,所以動畫會一直循環播放且正反方向交替進行,形成不斷搖晃的效果。
使用CSS搖晃的桃子可以讓網頁更加生動有趣,但因為動畫會影響網頁的性能,所以需要慎重使用。此外,不要濫用動畫效果,以免影響用戶的使用體驗。
上一篇css搜索輸入框
下一篇css搜索框網頁標準