CSS3動畫是一種非常流行的網頁設計技術，可以讓您的頁面更加生動有趣。下面是一些簡單易學的CSS3動畫教程，有助于您更好地掌握這項技術。

/* 鼠標懸停時圖像變亮的動畫效果 */
img:hover {
filter: brightness(150%);
transition: filter 0.5s ease;
}
/* 文字由上向下滑入的動畫效果 */
.slideInDown {
animation-name: slideInDown;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes slideInDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0%);
}
}
/* 元素彈跳的動畫效果 */
.bounce {
animation: bounce 1s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
/* 陰影多層疊加的動畫效果 */
.box {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
animation: shadow 1s infinite;
}
@keyframes shadow {
0% {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
50% {
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.7);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
}

這些動畫效果只是冰山一角，您可以通過不斷學習和實踐來創造出更加炫酷的動畫效果，提升您的網頁品質。