css实现悬浮客服效果

<div class="sideBar">
    <div>
        <div class="tips">在线 客服 </div>
        <ul class="list">
            <li> QQ :1846492969</li>
            <li>QQ:1846492969</li>
            <li>QQ:1846492969</li>
            <li>QQ:1846492969</li>
            <li>QQ:1846492969</li>
        </ul>
    </div>
</div>

.sideBar {
 pos IT ion: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;
 h ei ght:120px;
 line-height:25px;
 background-color:#eea236;
 width:40px;
 left:-40px;
 top:50px;
 text-align: center ;
 box -s izing:border-box;
 padding:10px 10px;
 border -t op-left-radius:5px;
 border-bottom-left-radius:5px;
  font-weight :bold;
 color:#ffffff;
}
.sideBar .list {
 padding:0;
 list-style:none;
 width:180px;
 m arg in: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实现悬浮客服效果， 希望对大家有所帮助 ，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你 觉得 本文对你有帮助，欢迎 转载 ，烦请注明出处，谢谢！

总结

以上是 为你收集整理的 css实现悬浮客服效果 全部内容，希望文章能够帮你解决 css实现悬浮客服效果 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于css实现悬浮客服效果的详细内容...