CSS3的特性讓頁面動畫豐富多彩，其中之一便是錘子敲擊動畫。通過CSS3的transform屬性和animation屬性，我們可以輕松實現這一效果。

/* 定義錘子敲擊的關鍵幀動畫 */
@keyframes hammer {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(45deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-45deg);
}
100% {
transform: rotate(0deg);
}
}
/* 定義錘子和瓶子的樣式 */
.hammer {
position: absolute;
left: 50%;
margin-left: -20px;
top: 20px;
width: 40px;
height: 80px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px #aaa;
animation: hammer 1s linear infinite;
}
.bottle {
position: absolute;
left: 50%;
margin-left: -30px;
top: 120px;
width: 60px;
height: 120px;
background-color: #f00;
border-radius: 50px 50px 0 0;
}
/* HTML代碼 */

上述代碼中，我們首先定義了一個關鍵幀動畫hammer，通過不同幀的旋轉角度，讓錘子看起來像在敲擊瓶子。在錘子和瓶子的樣式中，我們設置了它們的位置、大小、顏色等。在錘子的樣式中，我們還設置了旋轉動畫，使其不斷地敲擊下去。

通過以上的代碼我們可以得到如下的錘子敲擊動畫效果：