HTML5是一個(gè)具有強(qiáng)大功能和豐富特效的網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言。在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中，圖標(biāo)特效不僅是視覺(jué)上吸引人的元素，也是增強(qiáng)用戶體驗(yàn)和交互性的必要組成。 以下是一些常用的HTML5網(wǎng)頁(yè)特效圖標(biāo)代碼：

1. 鼠標(biāo)移動(dòng)特效

<style>
.icon {
position: relative;
display: inline-block;
transition: all .5s;
}
.icon:hover::before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border: 2px solid #666;
top: 0;
left: 0;
z-index: -1;
}
</style>
<div class="icon">
<i class="fa fa-heart"></i>
</div>

2. 圖標(biāo)放大特效

<style>
.icon {
transition: all .5s;
}
.icon:hover {
transform: scale(1.2);
}
</style>
<i class="fa fa-envelope-o icon"></i>

3. 旋轉(zhuǎn)動(dòng)畫(huà)特效

<style>
.icon {
animation: rotate .8s infinite linear;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<i class="fa fa-spinner icon"></i>

4. 進(jìn)度條特效

<style>
.icon {
position: relative;
display: inline-block;
}
.icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: #666;
animation: progress 3s linear;
}
@keyframes progress {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
</style>
<div class="icon">
<i class="fa fa-circle-o-notch"></i>
</div>

5. 焦點(diǎn)圖標(biāo)特效

<style>
.icon {
transition: all .5s;
}
.icon:focus {
transform: scale(1.2);
outline: none;
box-shadow: 0 0 3px #666;
}
</style>
<i class="fa fa-search icon" tabindex="0"></i>

以上是一些HTML5網(wǎng)頁(yè)特效圖標(biāo)代碼，你可以根據(jù)自己的需要用到你的網(wǎng)頁(yè)設(shè)計(jì)中。為了讓你的代碼更易于理解和維護(hù)，建議你使用HTML5的語(yǔ)義標(biāo)簽和CSS樣式表來(lái)實(shí)現(xiàn)這些特效。