HTML特效是前端開發(fā)中不可缺少的一部分，能夠?yàn)榫W(wǎng)站增加靈動(dòng)、有趣的交互效果，從而提高用戶體驗(yàn)。下面是一些常見的HTML特效，包含代碼示例：

1. 圖片輪播特效：

<div class="slider">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</div>
<script>
var slider = document.querySelector('.slider');
var imgs = document.querySelectorAll('.slider img');
var i = 0;
setInterval(function() {
i++;
if(i >= imgs.length) {
i = 0;
}
slider.style.transform = 'translateX(' + (-i * 100) + '%)';
}, 3000);
</script>

2. 鼠標(biāo)懸停放大縮小特效：

<div class="img-container">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</div>
<style>
.img-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.img-container img {
transition: transform .5s ease;
}
.img-container img:hover {
transform: scale(1.2);
}
</style>

3. 輸入框下劃線特效：

<div class="input-container">
<input type="text">
<div class="underline"></div>
</div>
<style>
.input-container {
position: relative;
}
.input-container input {
border: none;
outline: none;
font-size: 18px;
padding: 10px;
}
.input-container .underline {
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background-color: #333;
transition: width .5s ease;
}
.input-container input:focus + .underline {
width: 100%;
}
</style>

4. 背景色漸變特效：

<div class="bg"></div>
<style>
.bg {
background-color: #333;
transition: background-color .5s ease;
}
.bg:hover {
background-color: #666;
}
</style>

5. 圖片翻轉(zhuǎn)特效：

<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="img1.jpg">
</div>
<div class="back">
<img src="img2.jpg">
</div>
</div>
</div>
<style>
.flip-container {
perspective: 1000px;
}
.flipper {
position: relative;
transform-style: preserve-3d;
transition: transform .5s ease;
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.back {
transform: rotateY(180deg);
}
.flipper:hover {
transform: rotateY(180deg);
}
</style>

這些HTML特效可以根據(jù)具體需求進(jìn)行修改，定制屬于自己的特效。