在线客服系统源码开发实战总结:官网首页视频大背景循环播放效果实现
2023-02-18 15:37:02 时间
俗话说,人靠衣装,马靠鞍。官网首页是产品或公司的脸面,必须要大气。
原来旧版的支付宝首页,有个大视频作为页面背景一直播放展示,效果很赞,所以实现了下
先看看效果:
亮点部分
大视频是绝对定位,定在最下面,上面的文字是绝对定位,定在最上面。还加了一层半透明的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 } }
相关文章
- [NetWork] 数据封装与解封装流程
- 深度学习-LeNet(第一个卷积神经网络)
- Java跨域-Redirect的跨域问题解决
- 十年前,AlexNet就预定了今天的NeurIPS 2022时间检验奖
- 无需新型token mixer就能SOTA:MetaFormer视觉基线模型开源,刷新ImageNet记录
- 推荐一款神仙颜值的Redis客户端工具
- 首个在ImageNet上精度超过80%的二值神经网络BNext问世,-1与+1的五年辛路历程
- Redis+Guava,性能炸裂!这组合真的太顶了....
- 【eureka问题:已解决】Request execution failed with message: java.net.ConnectException: Connection refused:
- 【已解决】Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon runnin
- 【已解决】springboot在使用redisTemplate的测试的时候报空指针
- 差两个像素让我很难受,这问题绝不允许留到明年!
- React DevUI 18.0 正式发布🎉
- 好慌,我代码没了!不会是变基变出问题了吧?
- 老板:你为什么要选择 Vue?
- 实用的 Bash 快捷键
- Quill基本使用和配置 - DevUI
- Quill富文本编辑器的实践 - DevUI
- 如何解决异步接口请求快慢不均导致的数据错误问题? - DevUI
- 让我们一起建设 Vue DevUI 项目吧!🥳