纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)


Posted in HTML / CSS onApril 24, 2015

我们见过很多页面右侧浮动效果,最早有QQ联系面板,对联广告等,大多数都是基于Javascript实现的动态效果,今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果。

源码下载:点击下载

HTML

我们希望悬浮效果最后加载,因此一般将其放置在页面HTML的末尾,我们建立一个.side-bar,里面包含了QQ在线咨询,微信(鼠标滑向弹出二维码效果),微博,以及Email联系方式等内容,这些内容我们都以<a>标签包裹。

复制代码
代码如下:

<div class="side-bar">
<a href="#" class="icon-qq">QQ在线咨询</a>
<a href="#" class="icon-chat">微信<div class="chat-tips"><i></i>
<img style="width:138px;height:138px;" src="helloweba.jpg" alt="微信订阅号"></div></a>
<a target="_blank" href="" class="icon-blog">微博</a>
<a href="https://3water.com" class="icon-mail">mail</a>
</div>

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代码就完成了一个简洁的右下角悬浮效果,快去试下吧。

HTML / CSS 相关文章推荐
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 #HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 #HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 #HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 #HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 #HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 #HTML / CSS
css3实现3d旋转动画特效
Mar 10 #HTML / CSS
You might like
Linux操作系统安装LAMP环境
2015/06/26 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
利用JS实现数字增长
2016/07/28 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
python变量命名的7条建议
2019/07/04 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
python属于解释语言吗
2020/06/11 Python
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
人事主管岗位职责范本
2013/12/04 职场文书
个人简历自我评价
2014/02/02 职场文书
小学生期末评语大全
2014/04/21 职场文书
2014年人事科工作总结
2014/11/19 职场文书
离婚案件原告代理词
2015/05/23 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
学校少先队工作总结
2015/08/12 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
学校就业保障协议书
2019/06/24 职场文书