纯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属性box-shadow使用详细教程
Jan 21 HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 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实现单链表的实例代码
2013/03/22 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
js转html实体的方法
2016/09/27 Javascript
js表单登陆验证示例
2016/10/19 Javascript
Javascript的this用法
2017/01/16 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
详解vue-cli3多环境打包配置
2019/03/28 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
利用python实现数据分析
2017/01/11 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
Python 处理文件的几种方式
2019/08/23 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
入党综合考察材料
2014/06/02 职场文书
公司证明怎么写
2014/09/22 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
先进员工事迹材料
2014/12/20 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
pycharm代码删除恢复的方法
2021/06/26 Python