纯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实现毛玻璃效果示例源码
Sep 25 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
Jun 11 HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 HTML / CSS
html5实现点击弹出图片功能
Jul 16 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 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+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
jquery 无限级联菜单案例分享
2013/03/26 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
Python解释执行原理分析
2014/08/22 Python
python实现在目录中查找指定文件的方法
2014/11/11 Python
django加载本地html的方法
2018/05/27 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
如何在pycharm中安装第三方包
2020/10/27 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
什么是GWT的Entry Point
2013/08/16 面试题
《翻越远方的大山》教学反思
2014/04/13 职场文书
父亲节活动策划方案
2014/08/24 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
入党函调证明材料
2015/06/19 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL