bootstrap自适应大气右侧悬浮聊天客服窗口效果代码-html代码-BFW代码库

bootstrap自适应大气右侧悬浮聊天客服窗口效果代码

代码语言：html

所属分类：其他

代码描述：bootstrap自适应大气右侧悬浮聊天客服窗口效果代码，可以更换主题色。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html class="no-js" lang="en-US">

<head>
    <!-- meta -->
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">


    <link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <!-- ***** Boostrap Custom / Addons Stylesheets ***** -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/material-icons.css">
    <!-- Required CSS file for CSS Chat Panels element -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/perfect-scrollbar.0.7.css">
    <style>
        /**     01. Chat Application*************************************************** http://www.bootstrap.com**/.pvr_chat_button {
        z-index:9999;
        position:fixed;
        bottom:20px;
        right:35px;
        background:linear-gradient(to left,#8f94fb,#4e54c8);
        box-shadow:0 2px 30px 0 rgba(78,84,200,0.8);
        border-radius:75px;
        color:#fff;
        padding:12px 20px;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center;
        vertical-align:middle;
        font-size:14px;
        cursor:pointer;
        -webkit-transition:all 0.2s ease;
        transition:all 0.2s ease;
    }
    .pvr_chat_button.chat_left {
        left:35px;
        right:unset;
    }
    .pvr_chat_button i {
        vertical-align:middle;
        display:inline-block;
        font-size:15px;
    }
    .pvr_chat_button span {
        vertical-align:middle;
        display:inline-block;
        font-weight:600;
    }
    .pvr_chat_button i + span {
        margin-left:15px;
    }
    .pvr_chat_button:hover {
        -webkit-transform:scale(1.05);
        transform:scale(1.05);
        background:linear-gradient(to left,#8f94fb,#4e54c8);
        box-shadow:0 2px 30px 0 rgba(78,84,200,0.8);
    }
    .pvr_chat_wrapper {
        z-index:9999;
        position:fixed;
        bottom:70px;
        right:35px;
        visibility:hidden;
        opacity:0;
        -webkit-transform:translateY(-20px);
        transform:translateY(-20px);
        -webkit-transition:all 0.3s ease;
        transition:all 0.3s ease;
    .........完整代码请登录后点击上方下载按钮下载查看