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

分步骤实现纯CSS3发光分享按钮：

1. 创建分享图标

首先,我们需要创建出我们的分享图标,图标的制作可以使用知名的图标字库如FontAwesome和Iconfont,或者使用自己的图片制作.

2. HTML布局

我们需要一个div元素来包裹我们的分享图标,然后给这个div设置一个id和一些基本的样式.

<div id="share">
  <i class="iconfont">&#xe640;</i>
</div>

3. CSS样式

设置div#share的基本样式:

#share {
  display: inline-block;
  margin: 50px; /*调整分享图标的位置*/
  position: relative;
}
#share:hover .share-tip {
  display: inline-block;
}

在我们的div#share中创建一个span.share-tip,尝试一下鼠标悬浮效果：

#share .share-tip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0 2px 3px rgba(0,0,0,.1);
  color: #333;
  font-size: 14px;
}
#share:hover .share-tip {
  display: inline-block;
}

设置我们的分享图标的颜色:

.iconfont {color: #292929;}

设置我们的分享图标的颜色，让它发出光芒：

#share:hover .iconfont {
  position: relative;
  animation: share-glow 1s infinite alternate;
}
@-webkit-keyframes share-glow {
  0% {
    -webkit-box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.5)
  }
  100% {
    -webkit-box-shadow: 0 0 17px 7px rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 17px 7px rgba(255, 255, 255, 0.5);
  }
}

box-shadow是使我们的图标发出光芒的主要属性. 我们设置它在动画中从6px逐渐变化到17px.

至此一个简单的纯CSS3发光分享按钮已经实现了。如果你需要更多的分享渠道，可以通过相似的方式添加更多的图标。

示例说明

示例1

假设我们现在要在我们的博客文章中加入一个分享按钮，我们可以使用上述的方法完成一个分享按钮的样式，并将其嵌入到HTML中。

<article>
  <h2>我怀念的是以前的夏天</h2>
  <p>这里是内容</p>
  <p>这里是内容</p>
  <p>这里是内容</p>
  <p>这里是内容</p>
  <div id="share">
    <i class="iconfont">&#xe640;</i>
    <span class="share-tip">分享到社交媒体</span>
  </div>
</article>

示例2

假设我们要在我们的网站上实现多个分享按钮,并将其放在底部栏,我们可以使用上述的方法为每个分享按钮创建一个类似的样式,并在一起放置。

<footer>
  <div id="share">
    <ul>
      <li><a href="#" class="iconfont">&#xe6a8;</a></li>
      <li><a href="#" class="iconfont">&#xe6e8;</a></li>
      <li><a href="#" class="iconfont">&#xe654;</a></li>
      <li><a href="#" class="iconfont">&#xe625;</a></li>
    </ul>
    <p>分享到社交媒体</p>
  </div>
</footer>

#share ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
#share ul li {
  margin: 0 10px;
}
#share ul li a{
  color: #292929;
}
#share:hover ul li a {
  animation: share-glow 1s infinite alternate;
}
#share p {
  text-align: center;
}

这段代码实现了四个分享按钮图标的样式，使用flex布局将它们水平排列，设置<a>标签的样式，让它们在鼠标悬浮时发出光芒，最后设置“分享到社交媒体”文字的样式。整个底部栏看起来非常漂亮。