css3实现顶部社会化分享按钮示例


Posted in HTML / CSS onMay 06, 2014

今天要分享一款纯CSS3实现的社会化分享按钮,它放置在网页的顶部,你可以选择将它固定在网页顶部,这样对用户分享内容就十分方便。这些社会化分享按钮的图标文件来自google和bootstrap的字体文件,包含了个大社交网站的logo图标,可以先来看看效果图:

css3实现顶部社会化分享按钮示例

HTML结构代码

复制代码
代码如下:

<div class="social">
<span class="line"></span>
<ul>
<li class="facebook">
<a href="#" target="_blank">
<i class="fa fa-facebook fa-2x"></i>
</a>
</li>
<li class="twitter">
<a href="#" target="_blank">
<i class="fa fa-twitter fa-2x"></i>
</a>
</li>
<li class="codepen">
<a href="#" target="_blank"><img src="http://www.gettyicons.com/free-icons/222/simple/png/256/codepen_256.png" alt="CODEPEN" width="48" height="48"></a>
</li>
<li class="youtube">
<a href="#" target="_blank">
<i class="fa fa-youtube fa-2x"></i>
</a>
</li>
<li class="instagram">
<a href="#" target="_blank">
<i class="fa fa-instagram fa-2x"></i>
</a>
</li>
<li class="pinterest">
<a href="#" target="_blank">
<i class="fa fa-pinterest fa-2x"></i>
</a>
</li>
<li class="github">
<a href="#" target="_blank">
<i class="fa fa-github fa-2x"></i>
</a>
</li>
<li class="flickr">
<a href="#" target="_blank">
<i class="fa fa-flickr fa-2x"></i>
</a>
</li>
<li class="linkedin">
<a href="#" target="_blank">
<i class="fa fa-linkedin fa-2x"></i>
</a>
</li>
</ul>
</div>

这里主要是利用了ul li列表结构,么一个li都定义了相应的class,比如第一个定义了class="facebook",在之后的css中,将会对facebook类进行样式定义,这样做会非常方便。

然后再看看CSS代码,也比较简单:

复制代码
代码如下:

@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400);
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

先是引入了google和bootstrap的字体文件,下面可以利用这两个文件来渲染按钮的小图标。

复制代码
代码如下:

.social .line {
position: absolute;
top: 0; left: 0px;
width: 100%; height: 5px;
background: #fced00;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
z-index: 0;
}
.social ul {
position: fixed;
left: 50%; margin-left: -216px;
list-style: none;
color: #000;
}
.social ul li {
float: left;
}
.social ul li a {
position: relative;
float: left;
background: #fff000;
width: 48px; height: 48px;
text-align: center;
color: #000;
padding: 0 0 30px 0;
}
.social ul li a:hover {
color: #fff;
}
.fa-facebook, .fa-twitter, .fa-youtube, .fa-instagram, .fa-pinterest, .fa-github, .fa-flickr, .fa-linkedin {
padding: 10px 0 0 0;
}

上面这段主要定义了整个按钮控件的整体外观,包括每一个按钮项的边距之类的设置。

复制代码
代码如下:

.social ul li.facebook a:hover {
background: #3b5998;
}
.social ul li.twitter a:hover {
background: #44ccf6;
}
.social ul li.codepen a:hover {
background: #cccccc;
}
.social ul li.youtube a:hover {
background: #da2d2e;
}
.social ul li.instagram a:hover {
background: #66269e;
}
.social ul li.pinterest a:hover {
background: #c3042b;
}
.social ul li.github a:hover {
background: #000000;
}
.social ul li.flickr a:hover {
background: #72858c;
}
.social ul li.linkedin a:hover {
background: #1c66c2;
}

这段代码主要是对每一个按钮设置鼠标滑过的背景色设置,每一个按钮的背景色都不一样,这样显得色彩斑斓,非常漂亮。

HTML / CSS 相关文章推荐
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
时尚的CSS3进度条效果
Feb 22 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 HTML / CSS
css3圆角边框和边框阴影示例
May 05 #HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 #HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 #HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 #HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 #HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 #HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 #HTML / CSS
You might like
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
php 常用类汇总 推荐收藏
2010/05/13 PHP
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
checkbox使用示例
2013/08/23 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
Python功能键的读取方法
2015/05/28 Python
Python中正则表达式详解
2017/05/17 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
python多线程并发实例及其优化
2019/06/27 Python
python实现翻译word表格小程序
2020/02/27 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
Python如何输出整数
2020/06/07 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
求职信范文怎么写
2014/01/29 职场文书
班级寄语大全
2014/04/10 职场文书
诚信考试倡议书
2014/04/15 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
病假证明模板
2015/06/19 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python
OpenCV实现常见的四种图像几何变换
2022/04/01 Python