网站底部悬浮客服代码吸顶客服 超级好看的客服代码

演示截图:网站底部悬浮客服代码吸顶客服 超级好看的客服代码

使用方法:

把此代码加入网站css内:

/*底部左侧悬浮客服*/
.fixedIco, .fixedIco p::after{ 
    -webkit-transition:all 200ms ease;
    -moz-transition:all 200ms ease;
    -o-transition:all 200ms ease;
    -ms-transition:all 200ms ease;
    transition:all 200ms ease 
}

@keyframes fixedAni{
    0%{ transform:translate(-50%, -50%) scale( 1 ) ; opacity:.8; }
    100%{ width:150px; height:150px; transform:translate(-50%, -50%) scale( 2 ); opacity:0; }
} 

.fixedIco{position:fixed; z-index:9999; bottom:1em; width:50px; height:50px; background:#D72602; border-radius:5px; display:flex; align-items:center; justify-content:flex-start; }
    .fixedIco.active{ width:280px; height:30px; box-shadow:0 0 1em #D72602; }
    .fixedIco.active .head{ display:none; }

    .fixedIco a{color:white;text-decoration:none;display:block;}

    .fixedIco .head{ cursor:pointer; width:70px; position:absolute; left:-10px;  height:70px; background:#D72602; border-radius:50%; display:flex; align-items:center; justify-content:center; background:white; border:solid 4px #D72602;}
        .fixedIco .head img{ width:80%; }

    .fixedIco p{ color:white; text-shadow:0 0 1px rgba(0,0,0,.5); flex:1;  text-align:center; opacity:0; visibility:hidden; height:100%; line-height:40px; overflow:hidden; font-weight: 700; }
        .fixedIco p::after{ display:block; content:''; position:absolute; width:0; height:0; opacity:0; border-radius:50%; background:white; left:50%; top:50%;
            -webkit-animation:fixedAni 1.5s ease infinite; 
            animation:fixedAni 1.5s ease infinite; 
            -webkit-animation-fill-mode:forwards;
            animation-fill-mode:forwards;
            pointer-events:none;
        }
        .fixedIco p::before{ display:block; content:''; position:absolute; width:0; height:0; opacity:0; border-radius:50%; background:white; left:50%; top:50%;
            -webkit-animation:fixedAni 1s ease infinite; 
            animation:fixedAni 1s ease infinite; 
            -webkit-animation-fill-mode:forwards;
            animation-fill-mode:forwards;
            pointer-events:none;
        }

    .fixedIco.active p{ opacity:1; visibility:visible; }
/*底部左侧悬浮客服*/

 

在网站头部或底部或者任何一个每页都存在的页面加上:

<div class="fixedIco active" id="fixedIco">
        <p><a href="https://yzf.qq.com/xv/web/static/chat/index.html?sign=37ef9b97d1710a95264c97ed15e3b830d3c4eeb7ac8c336ac66c9babbe45e8f343ae90b17b243b43f2ca4fee1b549742f16d2175" rel="external nofollow"  target="_blank" onclick="windowsopen()">召唤人工客服,为您解答一切疑问!</a></p>
    </div>

刷新页面即可、(ctrl+f5强制刷新)

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!mb2345@qq.com 2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励! 3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负! 4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有MB奖励和额外收入!

模板2345精品站长源码站 建站教程 网站底部悬浮客服代码吸顶客服 超级好看的客服代码 https://www.mb2345.com/5705.html

下一篇:

已经没有下一篇了!

常见问题

相关文章

评论
暂无评论