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;
    .........完整代码请登录后点击上方下载按钮下载查看