HTML 中的動(dòng)畫效果代碼大全 動(dòng)畫效果是讓網(wǎng)頁(yè)變得活躍、吸引人的重要組成部分。在 HTML 中，使用動(dòng)畫效果可以通過(guò) CSS3 或 JavaScript 實(shí)現(xiàn)。下面將為大家介紹一些常見(jiàn)的 HTML 動(dòng)畫效果，以及實(shí)現(xiàn)它們的代碼。 1. 按鈕 hover 效果 鼠標(biāo)懸停在按鈕上時(shí)，背景色會(huì)發(fā)生變化，給人一種交互感。

<style>
button {
width: 150px;
height: 40px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
button:hover {
background-color: #0069d9;
}
</style>
<button>Click me!</button>

2. 漸變過(guò)渡動(dòng)畫 通過(guò)改變顏色和大小的過(guò)渡動(dòng)畫，可以給網(wǎng)頁(yè)帶來(lái)更加舒適的用戶體驗(yàn)。

<style>
.box {
width: 100px;
height: 100px;
background-color: #007bff;
transition: background-color 0.3s ease-in-out, width 0.3s ease-in-out;
}
.box:hover {
background-color: #0069d9;
width: 200px;
}
</style>
<div class="box"></div>

3. 旋轉(zhuǎn)動(dòng)畫 旋轉(zhuǎn)動(dòng)畫可以使某個(gè)元素在網(wǎng)頁(yè)中呈現(xiàn)出一種獨(dú)特的運(yùn)動(dòng)效果，增強(qiáng)用戶的視覺(jué)體驗(yàn)。

<style>
.box {
width: 100px;
height: 100px;
background-color: #007bff;
transform: rotate(0deg);
transition: transform 0.3s ease-in-out;
}
.box:hover {
transform: rotate(360deg);
}
</style>
<div class="box"></div>

4. 滾動(dòng)效果 滾動(dòng)效果可以使某個(gè)元素或整個(gè)網(wǎng)頁(yè)在滾動(dòng)時(shí)呈現(xiàn)出流暢的效果，增強(qiáng)用戶的閱讀體驗(yàn)。

<style>
div {
width: 300px;
height: 500px;
background-image: url(bg.jpg);
background-size: cover;
overflow-y: scroll;
transition: margin-right 0.3s ease-in-out;
}
div:hover {
margin-right: 20px;
}
</style>
<div>
<p>這是一段文本。</p>
<p>這是一段文本。</p>
<p>這是一段文本。</p>
<p>這是一段文本。</p>
<p>這是一段文本。</p>
<p>這是一段文本。</p>
<p>這是一段文本。</p>
</div>

通過(guò)以上代碼，可以很簡(jiǎn)單地實(shí)現(xiàn)常見(jiàn)的 HTML 動(dòng)畫效果。在實(shí)際的網(wǎng)頁(yè)設(shè)計(jì)中，不同的效果的結(jié)合和創(chuàng)新可以讓網(wǎng)頁(yè)更加豐富多彩，吸引更多的用戶。