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

最新推荐文章于 2024-08-01 23:43:18 发布

程序员老狼

最新推荐文章于 2024-08-01 23:43:18 发布

阅读量181

点赞数

文章标签：音视频 css3 css 动画前端

本文链接：https://blog.csdn.net/taoshihan/article/details/127836071

版权

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

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

先看看效果：

亮点部分

大视频是绝对定位，定在最下面，上面的文字是绝对定位，定在最上面。还加了一层半透明的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
    }
}