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 3D位移translate效果实例介绍
May 03 HTML / CSS
css3中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
CSS3教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
html5启动原生APP总结
Jul 03 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 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
一些星际专用术语解释
2020/03/04 星际争霸
1 Tube Radio
2021/03/02 无线电
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
react 生命周期实例分析
2020/05/18 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
Python中特殊函数集锦
2015/07/27 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
python如何删除文件中重复的字段
2019/07/16 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
python 制作网站小说下载器
2021/02/20 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
仓管员岗位职责范文
2013/11/08 职场文书
学生出入校管理制度
2014/01/16 职场文书
工作疏忽检讨书
2014/01/25 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书