俗话说,人靠衣装,马靠鞍。官网首页是产品或公司的脸面,必须要大气。
原来旧版的支付宝首页,有个大视频作为页面背景一直播放展示,效果很赞,所以实现了下
先看看效果:
亮点部分
大视频是绝对定位,定在最下面,上面的文字是绝对定位,定在最上面。还加了一层半透明的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)
<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/">
可两分钟搭建部署好的https://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数据库,是一个开箱即用的全渠道在线客服系统,致力于帮助广大开发者/公司快速部署整合私有化客服功能。 开源地址:唯一客服(开源学习版) 官网地址:唯一客服官网