纯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模块的目前的状况分析
Feb 24 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
css3实现针线缝合效果(图解步骤)
Feb 04 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
Html5页面二次分享的实现
Jul 30 HTML / CSS
AmazeUI 列表的实现示例
Aug 17 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
微信小程序python用户认证的实现
2019/07/29 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
大学生学习自我评价
2014/01/13 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
python字典进行运算原理及实例分享
2021/08/02 Python
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript