HTML特效是現(xiàn)代網(wǎng)頁設(shè)計的重要組成部分。這些特效可以幫助網(wǎng)頁設(shè)計師創(chuàng)建更加生動、有趣和吸引人的網(wǎng)頁，吸引用戶的注意力。下面是一些常用的HTML特效代碼大全，讓我們一起來看看吧！
<!DOCTYPE html>
<html>
<head>
<title>HTML特效代碼大全</title>
<style>
/* 鼠標懸停改變背景色 */
.hover {background-color: #FFC0CB;}
/* 動畫旋轉(zhuǎn) */
@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
.rotate {animation: rotation 2s infinite linear;}
/* 文字漸變 */
.gradient {background-image: linear-gradient(to right, #FFC0CB, #87CEFA);}
/* 表格鼠標懸停 */
tr:hover {background-color: #FFC0CB;}
/* 鼠標懸停彈出圖片 */
.pop-up {position: relative;}
.pop-up:hover .pop-up-img {display: block;}
.pop-up-img {position: absolute; top: 100%; left: 0; display: none;}
</style>
</head>
<body>
<!-- 鼠標懸停改變背景色 -->
<p class="hover">鼠標懸停我試試</p><br><br>
<!-- 動畫旋轉(zhuǎn) -->
<p class="rotate">動畫旋轉(zhuǎn)效果</p><br><br>
<!-- 文字漸變 -->
<p class="gradient">文字漸變效果</p><br><br>
<!-- 表格鼠標懸停 -->
<table>
<tr>
<th>列1</th>
<th>列2</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table><br><br>
<!-- 鼠標懸停彈出圖片 -->
<p class="pop-up">鼠標懸停我試試<img class="pop-up-img" src="圖片地址" alt="圖片描述"></p>
</body>
</html>