隨著互聯(lián)網(wǎng)的不斷發(fā)展，網(wǎng)頁特效變得越來越重要，html5和js成為了實現(xiàn)網(wǎng)頁特效的重要工具。而網(wǎng)上也大量流傳了許多html5和js特效的源代碼，下面就為大家介紹一些免費的html5和js特效源代碼。

<div class="box">
<img class="blur" src="image.jpg">
<img class="original" src="image.jpg">
</div>
.box {
position: relative;
overflow: hidden;
}
.blur {
filter: blur(10px);
transform: scale(1.2);
position: absolute;
top: 0;
left: 0;
}
.original {
position: absolute;
top: 0;
left: 0;
}

該代碼實現(xiàn)了圖片模糊和放大的效果，只需在html中添加兩張圖片，然后給其中一張圖片加上模糊效果，再用css將其放到合適的位置就可以實現(xiàn)這個效果。

<div class="box">
<img class="hover" src="hover.png">
<img class="original" src="image.jpg">
</div>
.box {
position: relative;
overflow: hidden;
}
.hover {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 0.3s ease;
}
.original:hover + .hover {
opacity: 1;
}

該代碼實現(xiàn)了鼠標(biāo)懸停時圖片出現(xiàn)遮罩的效果，只需在html中添加兩張圖片，然后用css將遮罩圖片的透明度設(shè)置為0并加上漸變效果，鼠標(biāo)懸停在原始圖片上時就可以展示出遮罩圖片。

<div class="box">
<div class="content">
<p>這是一段文字</p>
</div>
<div class="overlay"></div>
</div>
.box {
position: relative;
}
.content {
position: relative;
z-index: 1;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
transition: all 0.3s ease;
}
.box:hover .overlay {
opacity: 1;
}

該代碼實現(xiàn)了鼠標(biāo)懸停時圖片上覆蓋一層半透明遮罩并出現(xiàn)文字的效果，只需在html中添加一段文字和一個遮罩div，用css將遮罩div的透明度設(shè)置為0并加上漸變效果，在鼠標(biāo)懸停時就可以展示出遮罩和文字。

以上就是三個免費的html5和js特效源代碼，它們不僅能夠讓網(wǎng)頁變得更加美觀，而且還能夠提高用戶體驗，讓網(wǎng)站更具吸引力。