今天，我們來分享兩張圖片的css動畫效果。這些動畫不僅僅讓你網站更加生動，而且提高了訪問者的互動體驗。

下面是我們要分享的兩個動畫效果：

1. 圖片放大和旋轉
2. 圖片抖動

圖片放大和旋轉效果

首先，我們來看看如何將圖片放大并旋轉:

.enlarge-rotate {
transition: all 0.3s ease-out;
transform-origin: center center;
transform: scale(1) rotate(0deg);
}
.enlarge-rotate:hover {
transform: scale(1.2) rotate(-20deg);
}

這個動畫是基于CSS3變換實現的。在默認狀態下，圖片會保持原始的比例和角度。當鼠標懸停在圖片上時，圖片會以中心點為基準放大并逆時針旋轉20度。

圖片抖動效果

現在，讓我們來看看如何讓圖片抖動:

.shake {
animation-name: shake;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}

這個動畫是基于CSS3動畫實現的。它以1秒的頻率無限執行，讓圖片在其位置周圍抖動。

以上這兩個動畫效果只是CSS動畫中的一小部分。有了這些效果，在你的網站中展示商品或服務將更加吸引人。如果你想要探索更多的CSS動畫選項，請查看文檔或嘗試創建您自己的動畫。