效果圖展示
仿墨跡天氣首頁(yè)
github項(xiàng)目地址：https://github.com/Ethan997/Video-background-page
PC端網(wǎng)頁(yè)效果預(yù)覽：http://www.ethan997.com:8080/holiday_project/intro/intro.html
想要實(shí)現(xiàn)這種效果很容易，只需要懂得H5的video， 按照我的步驟一步一步來(lái)就可以了~
首先要制作我們的頁(yè)面，用到的是html5的新標(biāo)簽video
html :
<video autoplayloopposter="polina.jpg"class="bgvid"id="bgvid">
<source src="http://cdn.moji.com/websrc/video/video621.mp4" type="video/mp4">
</video>
css樣式也沒(méi)有什么好說(shuō)的，只是要讓視頻充滿(mǎn)屏幕、循環(huán)、無(wú)聲、直接播放、隱藏按鈕和不重復(fù)就可以了。
css:
body{
background-color:gray;
background:url("http://cdn.moji.com/websrc/video/video621.mp4") no-repeat center0px;
}
video#bgvid ?{
position: fixed; right:0; bottom:0;
min-width:100%; min-height:100%; width: auto;height:
auto;z-index:-100; background-size: cover;
}
