CSS实现右侧底部悬浮效果
导读：我们见过很多页面右侧浮动效果，最早有QQ联系面板，对联广告等，大多数都是基于Javascript实现的动态效果，今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果。 源码下载：点击下载 HTML 我们希望悬浮效果最后加载，因此一般...
我们见过很多页面右侧浮动效果，最早有QQ联系面板，对联广告等，大多数都是基于Javascript实现的动态效果，今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果。
源码下载：点击下载
HTML
我们希望悬浮效果最后加载，因此一般将其放置在页面HTML的末尾，我们建立一个.side-bar，里面包含了QQ在线咨询，微信（鼠标滑向弹出二维码效果），微博，以及Email联系方式等内容，这些内容我们都以标签包裹。
CSS
我们使用CSS来完成浮动即鼠标滑向弹出效果。我们准备一张图片right_bg.png，包含了几个内容的图标，然后通过background-position各个图标对应的a内容。我们使用position: fixed以及设置bottom和right值将.side-bar固定在右下角，这样无论页面如何滚动，.side-bar将一直在右下角位置不变。这里需要提下ie6下fixed效果需要单独处理，但本文不做详解，放弃ie6吧。
.side-bar a,.chat-tips i { background: url(right_bg.png) no-repeat; }
.side-bar { width: 66px; position: fixed; bottom: 20px; right: 25px; font-size: 0; line-height: 0; z-index: 100; }
.side-bar a { width: 66px; height: 66px; display: inline-block; background-color: #ddd; margin-bottom: 2px; }
.side-bar a:hover { background-color: #669fdd; }
.side-bar .icon-qq { background-position: 0 -62px; }
.side-bar .icon-chat { background-position: 0 -130px; position: relative; }
.side-bar .icon-blog { background-position: 0 -198px; }
.side-bar .icon-mail { background-position: 0 -266px; }
这里还有个鼠标滑向微信图标的效果，当鼠标hover时，.chat-tips的display属性设置为block，并且设置定位位置，一下代码还包含了一个箭头的CSS写法：
.side-bar .icon-chat:hover .chat-tips { display: block; }
.chat-tips { padding: 20px; border: 1px solid #d1d2d6; position: absolute; right: 78px; top: -55px; background-color: #fff; display: none; }
.chat-tips i { width: 9px; height: 16px; display: inline-block; position: absolute; right: -9px; top: 80px; background-position:-88px -350px; }
.chat-tips img { width: 138px; height: 138px; }
简单的几行CSS代码就完成了一个简洁的右下角悬浮效果，快去试下吧。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS实现右侧底部悬浮效果
本文地址： https://pptw.com/jishu/666613.html