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实现顶部社会化分享按钮示例
May 06 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 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
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
详解jquery和vue对比
2019/04/16 jQuery
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
Python实现带百分比的进度条
2016/06/28 Python
Python unittest单元测试框架总结
2018/09/08 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
霸气押韵的班级口号
2014/06/09 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
2015入党自传格式范文
2015/06/26 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python