html如何加入浮动客服,css实现悬浮客服效果

在线客服

• QQ:1846492969
• QQ:1846492969
• QQ:1846492969
• QQ:1846492969
• QQ:1846492969

.sideBar {

position:fixed;

right:-182px;

top:50px;

background-color:#ffffff;

border:#eea236 solid 1px;

transition:right 0.5s;

border:solid 1px red;

}

.sideBar:hover {

right:0;

}

.sideBar>div {

position:relative;

}

.sideBar .tips {

position:absolute;

height:120px;

line-height:25px;

background-color:#eea236;

width:40px;

left:-40px;

top:50px;

text-align:center;

box-sizing:border-box;

padding:10px 10px;

border-top-left-radius:5px;

border-bottom-left-radius:5px;

font-weight:bold;

color:#ffffff;

}

.sideBar .list {

padding:0;

list-style:none;

width:180px;

margin:0;

}

.sideBar .list>li {

padding:15px;

border-top:#eea236 dashed 1px;

}

.sideBar .list>li:hover {

background-color:#f0ad4e;

color:#ffffff;

}

.sideBar .list>li:first-child {

border-top:none;

}

总结

以上所述是小编给大家介绍的css实现悬浮客服效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！