在线客服系统源码开发实战总结：官网首页视频大背景循环播放效果实现

俗话说，人靠衣装，马靠鞍。官网首页是产品或公司的脸面，必须要大气。

原来旧版的支付宝首页，有个大视频作为页面背景一直播放展示，效果很赞，所以实现了下

https://gofly.v1kf.com

先看看效果：

亮点部分

大视频是绝对定位，定在最下面，上面的文字是绝对定位，定在最上面。还加了一层半透明的div蓝色调。

文案的居中是使用的 display:flex排版

文案部分有一个渐变色效果

文案部分还有一个动画效果没有展示，是个渐出动画效果

html部分

css部分

/*首页banner*/

.vedioBanner{

height: 1000px;

overflow: hidden;

position: relative;

display: flex;

align-items: center;

justify-content: center;

}

.vedioBanner video{

position: absolute;

top: 0;

left: 50%;

z-index: 0;

width: 2400px;

margin-left: -1200px;

}

.videomask {

min-width: 100%;

min-height: 100%;

position: absolute;

top: 0;

left: 0;

opacity: .2;

background: #2d8cf0;

z-index: 9;

}

.vedioBannerIntro {

width: 1000px;

margin-top: 30px;

font-size: 14px;

color: #fff;

text-align: center;

z-index: 99;

-webkit-animation: fadeInDown 0.5s ease-in;

-moz-animation: fadeInDown 0.5s ease-in;

-o-animation: fadeInDown 0.5s ease-in;

animation: fadeInDown 0.5s ease-in;

}

@keyframes fadeInDown {

0% {

opacity: 0

}

to {

opacity: 1

}

}

参考链接