效果預覽

在這篇文章中，我們將學習如何使用CSS來創建一個生動的圣誕老人動畫。通過CSS的魔力，我們可以讓圣誕老人在網頁上搖擺，仿佛在向我們招手慶祝圣誕節和新年。

實現思路

實現這個效果的關鍵在于CSS的@keyframes動畫規則以及各種CSS屬性的巧妙使用。我們首先定義了圣誕老人的各個部分，包括帽子、耳朵、臉部、眼睛、鼻子和胡須。然后，通過動畫讓圣誕老人的整個身體搖擺，營造出動態的效果。

關鍵代碼展示

/* 定義動畫 */
@keyframes rock {0%, 100% {transform: rotate(-1deg);}50% {transform: rotate(2deg);}
}/* 圣誕老人容器 */
.wrapper {animation: rock infinite 1s;
}/* 圣誕老人的帽子 */
.hat {position: absolute;background: var(--hat-color);width: 100%;height: 90px;top: 30px;border-radius: 100px 100px 0 0;box-shadow: var(--box-shadow);z-index: 1;
}/* 圣誕老人的臉部 */
.face {position: absolute;bottom: 0;width: 100%;height: 170px;border-radius: 0 0 120px 120px;overflow: hidden;
}/* 圣誕老人的眼睛 */
.eye {position: absolute;width: 18px;height: 18px;background: var(--eye-color);top: 30px;border-radius: 50%;
}/* 圣誕老人的胡須 */
.beard {position: absolute;width: 100%;height: 180px;background: var(--beard-color);bottom: 0;border-radius: 0 0 200px 200px;box-shadow: var(--box-shadow-beard);z-index: -1;
}

完整代碼

點我下載純CSS實現動態圣誕老人

結語

通過上述代碼，我們可以看到，純CSS就能夠創造出非常有趣和生動的動畫效果。這不僅能夠提升網頁的視覺效果，還能增加用戶的互動體驗。希望這篇教程能夠幫助你在自己的項目中實現類似的效果。