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

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

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

先看看效果：

亮点部分

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

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

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

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

html部分

<div https://www.cnblogs.com/taoshihan/archive/2022/11/13/class=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"https://www.cnblogs.com/taoshihan/archive/2022/11/13/vedioBannerhttps://www.cnblogs.com/taoshihan/archive/2022/11/13/">    <div https://www.cnblogs.com/taoshihan/archive/2022/11/13/class=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"https://www.cnblogs.com/taoshihan/archive/2022/11/13/vedioBannerIntrohttps://www.cnblogs.com/taoshihan/archive/2022/11/13/">            
唯一客服(V1KF.COM)
可两分钟搭建部署好的https://www.cnblogs.com/taoshihan/archive/2022/11/13/高性能在线客服系统
            <a href=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"https://www.cnblogs.com/taoshihan/archive/2022/11/13/https://gofly.v1kf.com/chatIndex?ent_id=2&kefu_id=kefu2https://www.cnblogs.com/taoshihan/archive/2022/11/13/" https://www.cnblogs.com/taoshihan/archive/2022/11/13/class=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"https://www.cnblogs.com/taoshihan/archive/2022/11/13/btn btn-primaryhttps://www.cnblogs.com/taoshihan/archive/2022/11/13/" target=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"https://www.cnblogs.com/taoshihan/archive/2022/11/13/_blankhttps://www.cnblogs.com/taoshihan/archive/2022/11/13/">访客端演示            <a href=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"https://www.cnblogs.com/taoshihan/archive/2022/11/13/https://gofly.v1kf.com/loginhttps://www.cnblogs.com/taoshihan/archive/2022/11/13/" https://www.cnblogs.com/taoshihan/archive/2022/11/13/class=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"https://www.cnblogs.com/taoshihan/archive/2022/11/13/btn btn-outline-infohttps://www.cnblogs.com/taoshihan/archive/2022/11/13/" target=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"https://www.cnblogs.com/taoshihan/archive/2022/11/13/_blankhttps://www.cnblogs.com/taoshihan/archive/2022/11/13/">后台演示（账号kefu2 密码123）        <div https://www.cnblogs.com/taoshihan/archive/2022/11/13/class=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"https://www.cnblogs.com/taoshihan/archive/2022/11/13/videomaskhttps://www.cnblogs.com/taoshihan/archive/2022/11/13/">    <video width=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"https://www.cnblogs.com/taoshihan/archive/2022/11/13/100%https://www.cnblogs.com/taoshihan/archive/2022/11/13/" id=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"https://www.cnblogs.com/taoshihan/archive/2022/11/13/videohttps://www.cnblogs.com/taoshihan/archive/2022/11/13/" autoplay=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"" loop=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"" preload=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"" muted=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"" x-webkit-airplay=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"https://www.cnblogs.com/taoshihan/archive/2022/11/13/truehttps://www.cnblogs.com/taoshihan/archive/2022/11/13/" airplay=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"https://www.cnblogs.com/taoshihan/archive/2022/11/13/allowhttps://www.cnblogs.com/taoshihan/archive/2022/11/13/" webkit-playsinline=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"https://www.cnblogs.com/taoshihan/archive/2022/11/13/truehttps://www.cnblogs.com/taoshihan/archive/2022/11/13/" playsinline=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"https://www.cnblogs.com/taoshihan/archive/2022/11/13/truehttps://www.cnblogs.com/taoshihan/archive/2022/11/13/" src=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"https://www.cnblogs.com/taoshihan/archive/2022/11/13/https://c.kuai.360.cn/kjji/activity/pc/kjj.mp4https://www.cnblogs.com/taoshihan/archive/2022/11/13/" https://www.cnblogs.com/taoshihan/archive/2022/11/13/class=https://www.cnblogs.com/taoshihan/archive/2022/11/13/"https://www.cnblogs.com/taoshihan/archive/2022/11/13/video1 videohttps://www.cnblogs.com/taoshihan/archive/2022/11/13/">

css部分

https://www.cnblogs.com/taoshihan/archive/2022/11/13//*https://www.cnblogs.com/taoshihan/archive/2022/11/13/首页bannerhttps://www.cnblogs.com/taoshihan/archive/2022/11/13/*/https://www.cnblogs.com/taoshihan/archive/2022/11/13/.vedioBanner{    height: 1000px;    overflow: hidden;    position: relative;    display: flex;    align-https://www.cnblogs.com/taoshihan/archive/2022/11/13/items: center;    justify-https://www.cnblogs.com/taoshihan/archive/2022/11/13/content: center;}.vedioBanner video{    position: absolute;    top: https://www.cnblogs.com/taoshihan/archive/2022/11/13/0https://www.cnblogs.com/taoshihan/archive/2022/11/13/;    left: https://www.cnblogs.com/taoshihan/archive/2022/11/13/50%https://www.cnblogs.com/taoshihan/archive/2022/11/13/;    z-index: https://www.cnblogs.com/taoshihan/archive/2022/11/13/0https://www.cnblogs.com/taoshihan/archive/2022/11/13/;    width: 2400px;    margin-left: -https://www.cnblogs.com/taoshihan/archive/2022/11/13/1200px;}.videomask {    min-width: https://www.cnblogs.com/taoshihan/archive/2022/11/13/100%https://www.cnblogs.com/taoshihan/archive/2022/11/13/;    min-height: https://www.cnblogs.com/taoshihan/archive/2022/11/13/100%https://www.cnblogs.com/taoshihan/archive/2022/11/13/;    position: absolute;    top: https://www.cnblogs.com/taoshihan/archive/2022/11/13/0https://www.cnblogs.com/taoshihan/archive/2022/11/13/;    left: https://www.cnblogs.com/taoshihan/archive/2022/11/13/0https://www.cnblogs.com/taoshihan/archive/2022/11/13/;    opacity: .https://www.cnblogs.com/taoshihan/archive/2022/11/13/2https://www.cnblogs.com/taoshihan/archive/2022/11/13/;    background: #2d8cf0;    z-index: https://www.cnblogs.com/taoshihan/archive/2022/11/13/9https://www.cnblogs.com/taoshihan/archive/2022/11/13/;}.vedioBannerIntro {    width: 1000px;    margin-https://www.cnblogs.com/taoshihan/archive/2022/11/13/top: 30px;    font-https://www.cnblogs.com/taoshihan/archive/2022/11/13/size: 14px;    color: #fff;    text-https://www.cnblogs.com/taoshihan/archive/2022/11/13/align: center;    z-index: https://www.cnblogs.com/taoshihan/archive/2022/11/13/99https://www.cnblogs.com/taoshihan/archive/2022/11/13/;    -webkit-animation: fadeInDown https://www.cnblogs.com/taoshihan/archive/2022/11/13/0.5s ease-https://www.cnblogs.com/taoshihan/archive/2022/11/13/inhttps://www.cnblogs.com/taoshihan/archive/2022/11/13/;    -moz-animation: fadeInDown https://www.cnblogs.com/taoshihan/archive/2022/11/13/0.5s  ease-https://www.cnblogs.com/taoshihan/archive/2022/11/13/inhttps://www.cnblogs.com/taoshihan/archive/2022/11/13/;    -o-animation: fadeInDown https://www.cnblogs.com/taoshihan/archive/2022/11/13/0.5s  ease-https://www.cnblogs.com/taoshihan/archive/2022/11/13/inhttps://www.cnblogs.com/taoshihan/archive/2022/11/13/;    animation: fadeInDown https://www.cnblogs.com/taoshihan/archive/2022/11/13/0.5s  ease-https://www.cnblogs.com/taoshihan/archive/2022/11/13/inhttps://www.cnblogs.com/taoshihan/archive/2022/11/13/;}@keyframes fadeInDown {    https://www.cnblogs.com/taoshihan/archive/2022/11/13/0%https://www.cnblogs.com/taoshihan/archive/2022/11/13/ {        opacity: https://www.cnblogs.com/taoshihan/archive/2022/11/13/0https://www.cnblogs.com/taoshihan/archive/2022/11/13/    }    to {        opacity: https://www.cnblogs.com/taoshihan/archive/2022/11/13/1https://www.cnblogs.com/taoshihan/archive/2022/11/13/    }}

十年开发经验程序员，离职全心创业中，历时三年开发出的产品《唯一客服系统》 一款基于Golang+Vue开发的在线客服系统，软件著作权编号：2021SR1462600。一套可私有化部署的网站在线客服系统，编译后的二进制文件可直接使用无需搭开发环境，下载zip解压即可，仅依赖MySQL数据库，是一个开箱即用的全渠道在线客服系统，致力于帮助广大开发者/公司快速部署整合私有化客服功能。 开源地址：唯一客服（开源学习版） 官网地址：唯一客服官网