在线客服系统源码开发实战总结:官网首页视频大背景循环播放效果实现
2023-02-18 15:36:58 时间
俗话说,人靠衣装,马靠鞍。官网首页是产品或公司的脸面,必须要大气。
原来旧版的支付宝首页,有个大视频作为页面背景一直播放展示,效果很赞,所以实现了下
先看看效果:
亮点部分
大视频是绝对定位,定在最下面,上面的文字是绝对定位,定在最上面。还加了一层半透明的div蓝色调。
文案的居中是使用的 display:flex排版
文案部分有一个渐变色效果
文案部分还有一个动画效果没有展示,是个渐出动画效果
html部分
<div class="vedioBanner"> <div class="vedioBannerIntro"> <h2>唯一客服(V1KF.COM)<br>可两分钟搭建部署好的<span>高性能在线客服</span>系统</h2> <a href="https://gofly.v1kf.com/chatIndex?ent_id=2&kefu_id=kefu2" class="btn btn-primary" target="_blank">访客端演示</a> <a href="https://gofly.v1kf.com/login" class="btn btn-outline-info" target="_blank">后台演示(账号kefu2 密码123)</a> </div> <div class="videomask"></div> <video width="100%" id="video" autoplay="" loop="" preload="" muted="" x-webkit-airplay="true" airplay="allow" webkit-playsinline="true" playsinline="true" src="https://c.kuai.360.cn/kjji/activity/pc/kjj.mp4" class="video1 video"></video> </div>
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 } }