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

  • 2014年9月5日
  • 1,001
  • A+
所属分类:前端技术
摘要

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

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

你可以在这里看到DEMO演示

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

HTML代码:

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

以上的HTML结构利用了一个ul列表将5个分享按钮横向排列起来,结构非常清晰。

CSS代码:

首先我们需要将ul中的项横向排列,这就需要实现以下的CSS代码:


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

然后是实现分享按钮中的图标,这里我们引用了一个外部的字体库font-awesome.css,这个CSS文件中定义了很多图标字体,所以我们只需在页面上引用这个文件就可以了。

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

在这个CSS文件中我们可以看出,如果要添加facebook的图标,只要这样写就可以了:纯CSS3发光分享按钮的实现教程

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

文字投影效果:纯CSS3发光分享按钮的实现教程

以上就是所有的实现过程,当然并不是全部源码,全部源码你可以在这里下载

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
要变得坚强。如果很软弱的话,终有一日会连悲鸣都无法发出,活得像行尸走肉一般。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: