HTML/CSS動畫效果是現代網頁設計中的重要一環，可以讓網頁更加生動有趣。本文將分享一些常見的動畫效果代碼供大家參考。 首先介紹的是CSS3中的動畫效果。通過樣式屬性@keyframes，我們可以定義動畫的關鍵幀，再將其與元素的其他樣式屬性結合使用，在頁面中實現許多非常酷的效果。例如，下面的代碼實現了一個旋轉的立方體：

.box {
width: 100px;
height: 100px;
position: relative;
-webkit-animation: spin 5s linear infinite;
animation: spin 5s linear infinite;
}
@keyframes spin {
0% {
transform: translateZ(-50px) rotateY(0deg);
}
100% {
transform: translateZ(-50px) rotateY(360deg);
}
}

接下來是一個簡單的翻頁效果的代碼。我們可以看到，通過hover偽類的使用，以及利用transform屬性中的rotateY，實現了卡片翻轉的效果：

.card {
width: 200px;
height: 300px;
position: relative;
perspective: 800px;
}
.card:hover .card--inner {
transform: rotateY(180deg);
}
.card--inner {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform .8s ease-in-out;
backface-visibility: hidden;
}
.card--front, .card--back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
}
.card--back {
transform: rotateY(180deg);
}

最后，我們還可以通過JS來實現一些更為復雜的動畫效果。例如下面代碼實現了一個滾動的導航欄：

const nav = document.querySelector('nav');
const topOfNav = nav.offsetTop;
function fixNav() {
if (window.scrollY >= topOfNav) {
document.body.style.paddingTop = `${nav.offsetHeight}px`;
document.body.classList.add('fixed-nav');
} else {
document.body.style.paddingTop = 0;
document.body.classList.remove('fixed-nav');
}
}
window.addEventListener('scroll', fixNav);

本文提供了三個經典的HTML/CSS/JS動畫效果代碼供大家參考。當然，這還遠遠不是所有可以通過代碼實現的動畫效果，希望大家可以自己嘗試創造更好的效果。