隨著前端技術的發(fā)展，CSS 越來越強大，許多有趣的效果都可以通過 CSS 實現。其中，一種比較特別的效果就是“果凍狀”（Jelly Effect），它能讓頁面中的元素像果凍一樣晃動，具有一定的趣味性和美觀性。

.jelly {
position: relative;
animation-name: jelly;
animation-duration: 0.6s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
transform-origin: center bottom;
}
@keyframes jelly {
0%, 100% {
transform: scaleY(1);
}
25% {
transform: scaleY(0.85) scaleX(1.15);
}
50% {
transform: scaleY(1.15) scaleX(0.85);
}
75% {
transform: scaleY(0.95) scaleX(1.05);
}
}

上面是實現果凍狀效果的 CSS 代碼，可以使用它來給任意元素添加果凍狀效果。其中，關鍵在于動畫的實現方式，使用了 CSS 的“動畫”（animation）屬性，以及“關鍵幀”（keyframe）規(guī)則。

通過修改“transform”屬性，動畫會將元素在不同的時間點進行縮放和變形，產生晃動的效果。其中，“transform-origin”屬性是控制元素變形原點的，這里設置為底部中心。

通過調整關鍵幀的位置和變形程度，可以產生不同的果凍狀效果。比如，上面的代碼將元素在不同時間點進行不同程度的“縱向縮放”（scaleY）和“橫向扭曲”（scaleX），從而達到了果凍狀的效果。

通過運用好這些 CSS 技巧，我們可以給頁面添加獨特的效果，提高頁面的趣味性和美觀性。