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 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
纯CSS3实现图片无间断轮播效果
Aug 25 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
css3动画效果小结(推荐)
Jul 25 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 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
Content-type 的说明
2006/10/09 PHP
Windows下安装Memcached的步骤说明
2010/04/25 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
PHP中的session安全吗?
2016/01/22 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
Python入门篇之编程习惯与特点
2014/10/17 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
让python在hadoop上跑起来
2016/01/27 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
python实现中文转换url编码的方法
2016/06/14 Python
python实现kMeans算法
2017/12/21 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
django+mysql的使用示例
2018/11/23 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
python实现双色球随机选号
2020/01/01 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
python map比for循环快在哪
2020/09/21 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
党支部公开承诺践诺书
2014/03/28 职场文书
小学运动会报道稿
2014/10/04 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书