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

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

先看看效果:

亮点部分

大视频是绝对定位,定在最下面,上面的文字是绝对定位,定在最上面。还加了一层半透明的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数据库,是一个开箱即用的全渠道在线客服系统,致力于帮助广大开发者/公司快速部署整合私有化客服功能。 开源地址:唯一客服(开源学习版) 官网地址:唯一客服官网