HTML5是一個具有強大功能和豐富特效的網頁設計語言。在現代網頁設計中，圖標特效不僅是視覺上吸引人的元素，也是增強用戶體驗和交互性的必要組成。 以下是一些常用的HTML5網頁特效圖標代碼：

1. 鼠標移動特效

<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. 圖標放大特效

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

3. 旋轉動畫特效

<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. 進度條特效

<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. 焦點圖標特效

<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網頁特效圖標代碼，你可以根據自己的需要用到你的網頁設計中。為了讓你的代碼更易于理解和維護，建議你使用HTML5的語義標簽和CSS樣式表來實現這些特效。