右侧悬浮QQ客服

原创已于 2025-06-27 13:49:12 修改 · 533 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-30 14:35:18 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>右侧悬浮QQ客服</title>
<style>
* {
margin: 0;
padding: 0;
}

body {
font-family: "Microsoft YaHei", sans-serif;
height: 2000px;
background-color: #f5f5f5;
}

.float-qq {
position: fixed;
right: 0;
top: 50%;
margin-top: -100px;
width: 40px;
background-color: #12B7F5;
border-radius: 5px 0 0 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index: 9999;
transition: all 0.3s ease;
}

.float-qq:hover {
width: 160px;
}

.float-qq-item {
height: 40px;
line-height: 40px;
text-align: center;
color: white;
cursor: pointer;
position: relative;
overflow: hidden;
}

.float-qq-item:hover {
background-color: #0E9BD5;
}

.float-qq-item i {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
float: left;
}

.float-qq-item span {
display: inline-block;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
float: left;
font-size: 14px;
}

.float-qq-item .qq-num {
position: absolute;
right: 10px;
top: 0;
background-color: #FF6B6B;
color: white;
font-size: 12px;
padding: 2px 5px;
border-radius: 10px;
line-height: 1;
transform: scale(0.8);
}

.float-qq-top {
border-radius: 5px 0 0 0;
}

.float-qq-bottom {
border-radius: 0 0 0 5px;
}

.float-qq-tel {
background-color: #FF6B6B;
}

.float-qq-tel:hover {
background-color: #E74C3C;
}

.float-qq-qrcode {
position: absolute;
right: 50px;
top: 0;
width: 120px;
height: 120px;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 10px;
display: none;
}

.float-qq-qrcode img {
width: 100%;
height: 100%;
}

.float-qq-qrcode:after {
content: "";
position: absolute;
right: -10px;
top: 20px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid white;
}
</style>
</head>
<body>

<div class="float-qq">
<div class="float-qq-item float-qq-top">
<i></i>
<span>在线咨询</span>
</div>
<div class="float-qq-item">
<i></i>
<span>QQ客服1</span>
<span class="qq-num">123456</span>
</div>
<div class="float-qq-item">
<i></i>
<span>QQ客服2</span>
<span class="qq-num">654321</span>
</div>
<div class="float-qq-item float-qq-bottom float-qq-tel">
<i></i>
<span>电话咨询</span>
<span class="qq-num">400-123-4567</span>
</div>
</div>