纯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新属性
Nov 11 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
打开电脑上的QQ的python代码
2013/02/10 Python
python批量下载图片的三种方法
2013/04/22 Python
Python之web模板应用
2017/12/26 Python
python的中异常处理机制
2018/08/30 Python
python列表list保留顺序去重的实例
2018/12/14 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
python实现在一个画布上画多个子图
2020/01/19 Python
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
远程教育学习心得体会
2016/01/23 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA