想要在網站中加入照片動態效果嗎？那么HTML的img元素對你來說可能已經太過于單調了。HTML中也可以利用CSS3的動畫效果來實現一些炫酷的效果，比如照片輪播、漸變等等。下面給大家介紹一些實現照片動態效果的代碼。

<style>
#photo-container {
display: flex;
overflow: hidden;
height: 300px;
}
.photo {
flex-shrink: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.photo.active {
opacity: 1;
transition-delay: 0.5s;
}
.photo.previous {
transform: translateX(-100%);
}
.photo.next {
transform: translateX(100%);
}
</style>
<div id="photo-container">
<img class="photo active" src="photo-1.jpg">
<img class="photo next" src="photo-2.jpg">
<img class="photo previous" src="photo-3.jpg">
</div>
<script>
const photos = document.querySelectorAll('.photo');
let index = 0;
setInterval(() => {
photos[index].classList.remove('active');
photos[index].classList.add(index >0 ? 'previous' : 'next');
index++;
if (index >= photos.length) {
index = 0;
}
photos[index].classList.remove('previous', 'next');
photos[index].classList.add('active');
}, 5000);
</script>

代碼解析：

首先使用了flexbox布局，將圖片容器的display屬性設為flex，overflow設為hidden，即使圖片之間寬度超出容器的范圍也會被隱藏。每個圖片的class均為“photo”，默認opacity屬性設為0，則圖片不可見。

接下來利用CSS3的transition屬性來設定過渡動畫。active類表示當前展示的圖片，previous和next分別表示上一張和下一張圖片，通過transform: translateX()函數設定位置，在圖片切換的時候可以產生平移效果。transition-delay則是設定延時，需要等到opacity屬性變化完成后，才會觸發transform的平移效果。

最后是JS的部分，使用setInterval函數設定每5秒的時間周期，先設定當前index所表示的圖片的class，之后再將index自增，之后把下一張圖片的class設定為“active”。

總結：

在HTML中實現照片動態效果有多種方式，以上僅為其中一種?？梢酝ㄟ^自定義動畫、JavaScript代碼等其他方式實現自己想要的照片特效。