纯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 3D制作实战案例分析
Sep 18 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
关于 HTML5 的七个传说小结
Apr 12 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 HTML / CSS
使用canvas对video视频某一刻截图功能
Sep 25 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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/10/09 PHP
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
python操作xml文件详细介绍
2014/06/09 Python
python实现定时播放mp3
2015/03/29 Python
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python编程之序列操作实例详解
2017/07/22 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
python os模块简单应用示例
2019/05/23 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
工程造价与管理专业应届生求职信
2013/11/23 职场文书
九年级政治教学反思
2014/02/06 职场文书
大学军训感言400字
2014/03/11 职场文书
竞聘书模板
2014/03/31 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
关于感恩的作文
2019/08/26 职场文书