css实现悬浮客服效果

  发布时间:2020-01-13 10:26:01   作者:佚名   我要评论
这篇文章主要介绍了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 {
 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实现悬浮客服效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • css做个波浪悬浮球的实现方法

    这篇文章主要介绍了css做个波浪悬浮球的实现方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-14
  • css3实现的多种3d纸张鼠标悬浮特效源码

    css3实现的多种3d纸张鼠标悬浮特效源码是一段实现了鼠标路过或悬浮在3D纸张选项上,相应的3d纸张就会做出不同的特效,本段代码适应于所有网页使用,有需要的朋友们可以前来
    2017-04-06

最新评论