纯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弹性盒模型flex box快速入门心得(必看篇)
May 24 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 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
header()函数使用说明
2006/11/23 PHP
php Undefined index的问题
2009/06/01 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
vue实现购物车选择功能
2020/01/10 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
Python实现线程池代码分享
2015/06/21 Python
浅析Python中yield关键词的作用与用法
2016/11/29 Python
python3实现windows下同名进程监控
2018/06/21 Python
基于python实现学生管理系统
2018/10/17 Python
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
生态养殖创业计划书
2014/05/06 职场文书
装修施工安全责任书
2014/07/24 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
导游词之麻姑仙境
2019/11/18 职场文书