纯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 相关文章推荐
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
css3发光搜索表单分享
Apr 11 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 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
几个学习PHP的网址
2006/11/25 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
PyTorch中的C++扩展实现
2020/04/02 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
python中turtle库的简单使用教程
2020/11/11 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
高中生学期学习自我评价
2014/02/24 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
租房协议书样本
2014/08/20 职场文书
检讨书范文300字
2015/01/28 职场文书
旅游投诉信范文
2015/07/02 职场文书
结婚纪念日感言
2015/08/01 职场文书
详解Python常用的魔法方法
2021/06/03 Python
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python