在线人工客服悬浮特效_悬浮客服条滑动出现图-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148337282

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线人工客服悬浮特效</title>
<style>
/* 基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
min-height: 200vh; /* 为了演示滚动效果 */
}

/* 客服按钮样式 */
.customer-service {
position: fixed;
right: 30px;
bottom: 30px;
z-index: 9999;
cursor: pointer;
transition: all 0.3s ease;
}

.service-btn {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #4a90e2, #8e44ad);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
animation: pulse 2s infinite;
}

.service-btn:hover {
transform: scale(1.1);
}

.service-btn i {
color: white;
font-size: 28px;
}

/* 客服面板样式 */
.service-panel {
position: absolute;
right: 80px;
bottom: 0;
width: 300px;
background: white;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
overflow: hidden;
transform: scale(0);
transform-origin: bottom right;
opacity: 0;
transition: all 0.3s ease;
}

.service-panel.active {
transform: scale(1);
opacity: 1;
}

.panel-header {
background: linear-gradient(135deg, #4a90e2, #8e44ad);
color: white;
padding: 15px;
display: flex;
align-items: center;
}

.panel-header i {
margin-right: 10px;
font-size: 20px;
}

.panel-header h3 {
font-size: 16px;
font-weight: normal;
}

.panel-body {
padding: 15px;
}

.welcome-msg {
background: #f5f5f5;
padding: 10px;
border-radius: 5px;
margin-bottom: 15px;
font-size: 14px;
color: #333;
}

.service-options {
display: flex;
flex-direction: column;
gap: 10px;
}

.option-btn {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background: white;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
font-size: 14px;
}

.option-btn:hover {
background: #f5f5f5;
border-color: #4a90e2;
}

.panel-footer {
padding: 10px 15px;
border-top: 1px solid #eee;
font-size: 12px;
color: #999;
text-align: center;
}

/* 动画效果 */
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(74, 144, 226, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(74, 144, 226, 0);
}
}

/* 字体图标 - 使用Unicode字符作为简单图标 */
.icon {
font-style: normal;
font-family: Arial;
}

/* 响应式调整 */
@media (max-width: 480px) {
.customer-service {
right: 15px;
bottom: 15px;
}

.service-panel {
width: 280px;
right: 70px;
}
}
</style>
</head>
<body>

<div style="padding: 20px;">
<h1>网页内容示例</h1>
<p>向下滚动查看悬浮客服按钮效果</p>

<div style="height: 1000px;"></div>
</div>


<div class="customer-service">
<div class="service-btn" id="serviceBtn">
<i class="icon">💬</i>
</div>

<div class="service-panel" id="servicePanel">
<div class="panel-header">
<i class="icon">👩‍💼</i>
<h3>在线人工客服</h3>
</div>
<div class="panel-body">
<div class="welcome-msg">
您好！请问有什么可以帮您？请选择服务类型：
</div>
<div class="service-options">
<button class="option-btn">产品咨询</button>
<button class="option-btn">订单查询</button>
<button class="option-btn">售后服务</button>
<button class="option-btn">投诉建议</button>
</div>
</div>
<div class="panel-footer">
服务时间: 9:00-18:00 (周一至周五)
</div>
</div>
</div>

<script>
// 获取DOM元素
const serviceBtn = document.getElementById('serviceBtn');
const servicePanel = document.getElementById('servicePanel');

// 点击按钮切换面板显示/隐藏
serviceBtn.addEventListener('click', function() {
servicePanel.classList.toggle('active');
});

// 点击页面其他地方关闭面板
document.addEventListener('click', function(e) {
if (!serviceBtn.contains(e.target) && !servicePanel.contains(e.target)) {
servicePanel.classList.remove('active');
}
});
</script>
</body>
</html>