BY:微米云
|
浏览量:
想要实现这种效果很容易,只需要懂得H5的video, 按照我的步骤一步一步来就可以了~首先要制作我们的页面,用到的是html5的新标签videohtml :<video autoplayloopposter="polina.jpg"class="bgvid"id="bgvid"><source src="http://*****/video/video621.mp4" type="video/mp4"></video>css样式也没有什么好说的,只是要让视频充满屏幕、循环、无声、直接播放、隐藏按钮和不重复就可以了。css:body{background-color:gray;background:url("http://****/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;}
视频背景用一个视频作为网页的背景,视频大小会随窗口大小变化(响应式布局)html代码:
<div class="bg-video"><video class="v1" autoplay muted loop><source src="bg.mp4"></video></div>
css代码:.bg-video{width:100%;height:auto;left:0px;top:0px;z-index: -1;vertical-align:bottom;display:block;position:absolute;}.v1{width: 100%;height: auto;}
标签:
2025
04-16
01-24
BY:微米云
|
浏览量: