Browse Source

【隧芒hoem】

master
goule 3 years ago
commit
23126dcf55
4 changed files with 516 additions and 0 deletions
  1. +309
    -0
      css/index.css
  2. +64
    -0
      css/iti.css
  3. +123
    -0
      index.html
  4. +20
    -0
      js/index.js

+ 309
- 0
css/index.css View File

@@ -0,0 +1,309 @@
body{
background-color: #000A20 ;
}
/* 去掉全屏时显示的自带控制条 */
/* video::-webkit-media-controls{
display:none !important;
} */
.headBox{
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 80px;
background-color: #000A20 ;
overflow: hidden;
z-index: 100000;
}
.logo{
float: left;
margin-left: 60px;
margin-top: 20px;
width: 180px;
height: 60px;
background-color: #fff;
}
.mainBox{
float: right;
margin-right: 58px;
margin-top: 35px;
height: 17px;
line-height: 17px;
color: #fff;
font-size: 18px;
overflow: hidden;
text-align: center
}
.space{
margin: 0 60px;
}
.mainBox div{
float: left;
width: 72px;
height: 17px;
}
.videoBox{
overflow: hidden;
position: relative;
}
.titleBox{
position: absolute;
width: 100%;
font-size: 80px;
font-family: OPPOSans;
font-weight: 400;
color: #FFFFFF;
top: 30%;
left: 0;
text-align: center;
}
.consult{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 60px;
line-height: 60px;
background: #3ADDEF;
text-align: center;
color: #02172D;
font-size: 20px;
font-family: OPPOSans;
font-weight: 500;
border-radius: 6px;
}
.consult:hover {
color: #fff;
}
.video1{
width: 100%;
height: 1080px;
background: #000A20;;
}
.video2{
width: 100%;
height: 1080px;
background: #000A20;;
}
.itemBox{
width: 100%;
height: 800px;
background: #13161D;
position: relative;
overflow: hidden;
}
.textBox{
position: absolute;
top: 20%;
left: 20%;
width: 489px;
}
.title{
/* width: 357px; */
height: 69px;
font-size: 72px;
font-family: OPPOSans;
font-weight: 800;
color: #3ADDEF;
}
.fushou{
margin-top: 38px;
font-size: 36px;
font-family: OPPOSans;
font-weight: 500;
color: #FFFFFF;
}
.miaosu{
margin-top: 65px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 38px;
}
.item1{
position: absolute;
width: 600px;
height: 337px;
background: #13161D;
opacity: 0.8;
border-radius: 10px;
top: 20%;
right: 15%;
}
.suxian1{
width: 8px;
height: 522px;
position: absolute;
top: 86px;
left: 360px;
}
.suxian2{
width: 8px;
height: 522px;
position: absolute;
top: 86px;
right: 360px;
}
.suxian3{
position: absolute;
width: 1284px;
height: 8px;
left: 318px;
top: 559px
}
.name{
margin-top: 126px;
text-align: center;
font-size: 72px;
font-family: OPPOSans;
font-weight: 800;
color: #3ADDEF;
}
.dazao{
margin-top: 34px;
text-align: center;
font-size: 22px;
font-family: OPPOSans;
font-weight: 400;
color: #3ADDEF;
}
.dataText{
margin: 56px auto;
width: 1008px;
height: 176px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
}
.jieshao{
width: 200px;
height: 60px;
background: #3ADDEF;
margin: 146px auto;
font-size: 20px;
font-family: OPPOSans;
font-weight: 500;
color: #02172D;
text-align: center;
line-height: 60px;
}
.teamworkName{
margin-top: 110px;
text-align: center;
font-size: 72px;
font-family: OPPOSans;
font-weight: 800;
color: #000000;
}
.teamworkText{
margin-top: 44px;
text-align: center;
font-size: 30px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
}
.teamworkP{
margin-top: 10px;
text-align: center;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: bold;
color: rgba(255, 255, 255, 0.5);
}
.teamworkBox{
margin-top: 70px;
margin-left: 359px;
width: 1200px;
display: flex;
flex-wrap:wrap;
justify-content:space-between;

}
.itemImg{
width: 18%;
height: 108px;
background-color: #fff;
margin-bottom: 20px;
}
.teamworkBoxtop{
width: 100%;
height: 730px;
background: #13161D;
position: relative;
overflow: hidden;
}
.consultBox{
height: 376px;
background: #1C1F26;
overflow: hidden;
}
.wayBox{
float: left;
margin-left: 360px;
margin-top: 77px;
}
.zhixuantext{
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 10px;
}
.ph{
font-size: 26px;
font-family: OPPOSans;
font-weight: 500;
color: #FFFFFF;
margin-bottom: 64px
}
.stieText{
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 10px;
}
.stie{
font-size: 18px;
font-family: OPPOSans;
font-weight: 500;
color: #FFFFFF;
}
.rqCodeBox{
margin-top: 84px;
width: 777px;
float: left;
margin-left:40px;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
}
.rq{
width: 180px;
height: 180px;
background-color: #FFFFFF;
}
.rqBox p{
text-align: center;
margin-top: 20px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
}
.tail{
height: 60px;
line-height: 60px;
text-align: center;
background: #040405;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
}

+ 64
- 0
css/iti.css View File

@@ -0,0 +1,64 @@
@charset "utf-8";
body,video,p,h1,h2,h3,h4,h5,h6,dl,ol,li,ul,dd,input,textarea,button{
padding: 0;
margin: 0;
}

img{
vertical-align: top;
border:0;
}
a{
color: inherit;
text-decoration: none;
}
li{
list-style: none;
}
body{
font-family: "微软雅黑","宋体",Arial;
font-size: 12px;
color: #666;
}
input{
color: inherit;
font-size: inherit;
font-family: inherit;
}
textarea{
resize:none;
}
input:focus,button:focus,textarea:focus,select:focus{
outline: none;
}
/*input,button,textarea,select{
outline: none;
}*/
input[type="button"],input[type="reset"],input[type="submit"]{
cursor: pointer;
}
a:hover{
color: #53cac3 !important;
}
.sl{
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
.w{
width: 1170px;
margin-left: auto;
margin-right: auto;
}
.cl:after{
content: "";
display: block;
clear: both;
height:0;
overflow: hidden;
visibility: hidden;
}
.cl{
zoom: 1;
}


+ 123
- 0
index.html View File

@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/iti.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="headBox">
<img class="logo" src="https://formall.oss-accelerate.aliyuncs.com/suimang/logo.png" alt="">
<div class="mainBox">
<div>核销能力</div>
<div class="space">产品服务</div>
<div>关于我们</div>
</div>
</div>
<div class="videoBox">
<video autoplay loop muted class="video1" id="video1">
<source src="https://formall.oss-accelerate.aliyuncs.com/suimang/noText.mp4" type="video/mp4" />
</video>
<div class="titleBox">批量制作虚拟IP形象</div>
<div class="consult">点击咨询</div>
</div>
<video autoplay loop muted class="video2" id="video2">
<source src="https://formall.oss-accelerate.aliyuncs.com/suimang/compound.mp4" type="video/mp4" />
</video>


<div class="itemBox">
<div class="textBox">
<div class="title">影视级效果</div>
<div class="fushou">副标题副标题副标题副标题</div>
<div class="miaosu">文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描</div>
</div>

<video controls class="item1">
<source src="https://formall.oss-accelerate.aliyuncs.com/suimang/all.mp4" type="video/mp4" />
</video>
</div>
<div class="itemBox" style="background: #1A1D24;">
<div class="textBox">
<div class="title">AI替代传统CG</div>
<div class="fushou">副标题副标题副标题副标题</div>
<div class="miaosu">文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描</div>
</div>
<video controls class="item1" >
<source src="https://formall.oss-accelerate.aliyuncs.com/suimang/all.mp4" type="video/mp4" />
</video>
</div>
<div class="itemBox">
<div class="textBox">
<div class="title">实时处理</div>
<div class="fushou">副标题副标题副标题副标题</div>
<div class="miaosu">文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描</div>
</div>

<video controls class="item1" >
<source src="https://formall.oss-accelerate.aliyuncs.com/suimang/all.mp4" type="video/mp4" />
</video>
</div>

<div class="itemBox" style="background-image: url(https://formall.oss-accelerate.aliyuncs.com/suimang/-s-home_gywm_bnt.png);background-size: 100% 100%;background-repeat: no-repeat;">
<img class="suxian1" src="https://formall.oss-accelerate.aliyuncs.com/suimang/home_gywm_bnt2.png" alt="">
<img class="suxian2" src="https://formall.oss-accelerate.aliyuncs.com/suimang/home_gywm_bnt2.png" alt="">
<img class="suxian3" src="https://formall.oss-accelerate.aliyuncs.com/suimang/home_gywm_bnt1@2x.png" alt="">
<div class="name">遂芒科技</div>
<div class="dazao">打造数字虚拟IP,加速拓展智能世界</div>
<p class="dataText">公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍</p>
<div class="jieshao">视频介绍</div>
</div>
<div class="teamworkBoxtop" style="background-image: url(https://formall.oss-accelerate.aliyuncs.com/suimang/home_hzhb_bnt@2x.png);background-size: 100% 1000px;background-repeat: no-repeat;">
<div class="teamworkName">市场合作伙伴</div>
<div class="teamworkText">成功服务于20+行业2000+知名企业/影视公司</div>
<div class="teamworkP">释放企业潜能,创造无限价值</div>
<div class="teamworkBox">
<div class="itemImg"></div>
<div class="itemImg"></div>
<div class="itemImg"></div>
<div class="itemImg"></div>
<div class="itemImg"></div>
<div class="itemImg"></div>
<div class="itemImg"></div>
<div class="itemImg"></div>
<div class="itemImg"></div>
<div class="itemImg"></div>
</div>
</div>
<div class="consultBox">
<div class="wayBox">
<div class="zhixuantext">质询热线</div>
<div class="ph">咨询热线 020-12345678 </div>
<div class="stieText">总部地址</div>
<div class="stie">湖北省武汉市</div>
</div>
<div class="rqCodeBox">
<div class="rqBox">
<div class="rq"></div>
<p>抖音码</p>
</div>
<div class="rqBox">
<div class="rq"></div>
<p>快手码</p>
</div>
<div class="rqBox">
<div class="rq"></div>
<p>B站码</p>
</div>
<div class="rqBox">
<div class="rq"></div>
<p>视频号</p>
</div>

</div>
</div>
<div class="tail">版权信息版权信息版权信息版权信息版权信息版权信息版权信息版权信息版权信息版权信息版权信息版权信息版权信息</div>
</body>
</html>
<script language="javascript" src="./js/index.js"></script>

+ 20
- 0
js/index.js View File

@@ -0,0 +1,20 @@

let video1 = document.getElementById("video1");
let video2 = document.getElementById("video2");
video1.play();
window.onscroll = function () {
var t = document.documentElement.scrollTop || document.body.scrollTop; //变量t就是滚动条滚动时,到顶部的距离

console.log(video2.pause);
// video2.pause()
if (t < 700) {
video2.pause();
video1.play();
} else if (t >= 700) {
video1.pause();
video2.play();
}

}

Loading…
Cancel
Save