『html5、css3』将视频做为网页背景 超炫!

效果图展示

仿墨迹天气首页

github项目地址:https://github.com/Ethan997/Video-background-page

PC端网页效果预览:http://www.ethan997.com:8080/holiday_project/intro/intro.html

想要实现这种效果很容易,只需要懂得H5的video, 按照我的步骤一步一步来就可以了~

首先要制作我们的页面,用到的是html5的新标签video

html :


css样式也没有什么好说的,只是要让视频充满屏幕、循环、无声、直接播放、隐藏按钮和不重复就可以了。

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;

}

你可能感兴趣的:(『html5、css3』将视频做为网页背景 超炫!)