纯CSS3发光分享按钮的实现教程


Posted in HTML / CSS onSeptember 06, 2014

今天我们要利用CSS3来完成一款很酷的发光分享按钮,并将整理的源代码分享给大家,如果需要,你也可以将此CSS3分享按钮应用到自己的项目中去,也欢迎将此文分享给你的好友。下面先来看一看效果图

纯CSS3发光分享按钮的实现教程

下面我们来分析一下实现的过程以及核心的源码,代码主要由HTML和CSS组成,应该说比较简单。
HTML代码:

复制代码
代码如下:

<div>
<div>
<ul>
<li><a href="#"><i></i></a></li>
<li><a href="#"><i></i></a></li>
<li><a href="#"><i></i></a></li>
<li><a href="#"><i></i></a></li>
<li><a href="#"><i></i></a></li>
</ul>
</div>
</div>

以上的HTML结构利用了一个ul列表将5个分享按钮横向排列起来,结构非常清晰。
CSS代码:
首先我们需要将ul中的项横向排列,这就需要实现以下的CSS代码:

复制代码
代码如下:

ul {
list-style: none;
float: left;
}
ul li {
position: relative;
width: 100px; height: 100px;
float: left;
background: #474644;
border-radius: 15px;
border-bottom: 5px solid #33322f;
border-left: 3px solid #000000;
box-shadow: -3px 5px 10px 3px rgba(51, 50, 47, 0.5), 5px -5px 20px 10px rgba(51, 50, 47, 0.5) inset, 0px 2px 1px rgba(0, 0, 0, .7);
-webkit-transition: -webkit-box-shadow .15s ease-in-out;
}

然后是实现分享按钮中的图标,这里我们引用了一个外部的字体库font-awesome.css,这个CSS文件中定义了很多图标字体,所以我们只需在页面上引用这个文件就可以了。
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
在这个CSS文件中我们可以看出,如果要添加facebook的图标,只要这样写就可以了:
复制代码
代码如下:

.fa-facebook:before {
content: "\f09a";
}

最后我们要实现的是鼠标滑过的发光效果,其实说白了,就是改变文字的投影和内部图标颜色渐变动画,渐变动画如下代码所示:
复制代码
代码如下:

ul li:hover i{
-webkit-transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
ul li:active{
border-bottom: 1px solid #33322f;
top: 5px;
border-left: 1px solid #000000;
margin-right: 2px;
box-shadow: -2px 4px 7px 1px rgba(51, 50, 47, 0.7), 5px -5px 20px 10px rgba(51, 50, 47, 0.5) inset, -1px 2px 1px rgba(0, 0, 0, .7);
z-index: -1;
}

文字投影效果:
复制代码
代码如下:

.facebook:hover i{
text-shadow:
0px 0px #394C89, 0px 1px #32447A, -1px 2px #2C3B6A, -2px 3px #26335B, 0px 6px 5px rgba(51, 50, 47, 0.8),
0 0 1em #3f5598;
color: #3f5598;
}

以上就是用CSS3制作发光分享按钮的所有的实现过程,希望能帮到大家,谢谢
HTML / CSS 相关文章推荐
css3弹性盒模型实例介绍
May 27 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
CSS list-style-type属性使用方法
May 21 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 #HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 #HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 #HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 #HTML / CSS
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 #HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 #HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 #HTML / CSS
You might like
php+redis消息队列实现抢购功能
2018/02/08 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
JS实现碰撞检测效果
2020/03/12 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
Python httplib模块使用实例
2015/04/11 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
运动会开幕式邀请函
2014/01/22 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
工作经历证明范本
2015/06/15 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
Golang jwt身份认证
2022/04/20 Golang