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

来源：互联网发布：手机数据开关自动打开编辑：程序博客网时间：2024/04/29 22:54

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

css3-html5-share-button

你可以在这里看到DEMO演示

下面我们来分析一下实现的过程以及核心的源码，代码主要由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;}

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

本文链接：http://www.codeceo.com/article/pure-css3-shine-button.html
本文作者：码农网 – 小峰

0 0