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动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
CSS3 毛玻璃效果
Aug 14 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 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
PHP5 安装方法
2006/10/09 PHP
PHP 单引号与双引号的区别
2009/11/24 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
Javascript 继承机制实例
2009/08/12 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
代码讲解Python对Windows服务进行监控
2018/02/11 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
乡镇四风对照检查材料
2014/08/31 职场文书
先进单位申报材料
2014/12/25 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript