用视频作为网页背景动态展示内容
发布时间：2022-10-28 17:30:26
作者：Eagle
来源：本站
浏览量（1684）
点赞（200）
摘要：服务器带宽非常高的前提下用视频作为网页背景，会带来很强的视觉冲击。下面分享如何用视频作为网页背景去展示。html结构代码：<!DOCTYPEhtml><html><head><!--author:ethan997e-mail:ethan.997@foxmail.com-->&l
服务器带宽非常高的前提下用视频作为网页背景，会带来很强的视觉冲击。下面分享如何用视频作为网页背景去展示。
html结构代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视频作为网页背景</title>
<!--[if IE ]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="intro.css ">
</head>
<body>
<div class="text-center w-mian">
<video autoplay loop poster="polina.jpg" id="bgvid">
<source src="imgs/bg222.mp4" type="video/mp4">
<!-- <source src="http://cdn.moji.com/websrc/video/video621.mp4" type="video/mp4">-->
</video>
<h1 >Angular JS</h1>
<h3 style="margin-left: 20%">——<img src="imgs/favicon.ico"> <span id="w-temp">自主学习平台</span></span></h3>
<div class=" box center-block ">
<div class="login " >
<button id="wBtn" type="button" class="btn btn-danger wBtn">开始学习</button>
</div>
</div>
</div>
</body>
</html>
<script>
$("#wBtn").click(function () {
location.href="../index/index.html";
})
</script>CSS 样式代码：
body{
background-color:gray;
}
h1{
color:rgb(225,223,220);
margin-top:160px;
font-size:80px;
}
h3{
color:rgb(225,223,220);
}
img{
width:30px;
height:30px;
}
video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background-size: cover;
}
.box{
width:100%;
}
.wForm{
margin-top: 10px;
}
.wBtn{
margin-top: 20px;
width: 200px;
height: 80px;
border-radius: 130px;
opacity: 0.9;
font-size: 26px;
}下载完整案例：
视频作为背景.rar
扫一扫，关注我们
声明：本文由【达扬网络】编辑上传发布，转载此文章须经作者同意，并请附上出处【达扬网络】及本页链接。如内容、图片有任何版权问题，请联系我们进行处理。
200
