CSS作為前端開發中不可或缺的一部分，除了布局樣式及功能實現，其靈動的動畫效果同樣令人稱道。其中，晃動、擠壓、顯示漸隱等效果常被用來增添頁面活力。下面就來看看這三種效果是怎么實現的：

/* 晃動效果 */
@keyframes shake {
0% { transform: translate(0, 0); }
10% { transform: translate(-10px, 0); }
20% { transform: translate(10px, 0); }
30% { transform: translate(-10px, 0); }
40% { transform: translate(10px, 0); }
50% { transform: translate(-10px, 0); }
60% { transform: translate(10px, 0); }
70% { transform: translate(-10px, 0); }
80% { transform: translate(10px, 0); }
90% { transform: translate(-10px, 0); }
100% { transform: translate(0, 0); }
}
/* 添加晃動效果的元素 */
.shake {
animation: shake 1s infinite;
}
/* 擠壓效果 */
@keyframes squeeze {
0%, 100% { transform: scaleY(1); }
50%, 75% { transform: scaleY(0.5); }
}
/* 添加擠壓效果的元素 */
.squeeze {
animation: squeeze 1s infinite;
}
/* 顯示漸隱效果 */
@keyframes fade {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
/* 添加顯示漸隱效果的元素 */
.fade {
animation: fade 1s ease-in-out infinite;
}

通過以上代碼，我們可以看出實現這些效果主要是利用CSS的動畫屬性。晃動效果通過給元素添加一個“不斷重復”的晃動動畫實現；擠壓效果則是添加一個“半徑縮小”、“半徑放大”的動畫效果，制造出了“擠壓”的感覺；而顯示漸隱效果則是通過不斷循環的“顯示-隱藏”效果來呈現，增加了頁面的動感及層次感。