7种鼠标滑过超链接动画特效

这是一组效果很酷的鼠标滑过超链接元素时的动画特效。这组超链接动画效果使用伪元素来制作超链接的下划线，并使用CSS3 animation来制作各种动画效果。

使用方法

HTML结构

每一个超链接的效果的HTML结构都基本相同，使用一个<div>元素来作为包裹容器，在它的里面是一个超链接<a>元素。

<div class="link-1">
  <a href="#" class="demo">
    <span class="thin">link</span><span class="thick">one</span>
  </a>
</div>               
                

CSS样式

实现为超链接元素设置一些基本样式：超链接元素显示为块级元素，它的包裹元素显示为内联块级元素。

a.demo {
  text-transform: uppercase;
  font-size: 36px;
  color: white;
  text-decoration: none;
  position: relative;
  display: block;
}
[class^="link-"] {
  display: inline-block;
  margin: 2em
}       
                

在第一种超链接动画效果中，鼠标滑过超链接时，超链接底部会有2个线条从两侧向中间延伸。这两根线条使用<a>a元素的:before和:after伪元素来制作。它们使用绝对定位，一条定位在超链接的左下角位置，另外一条定位在超链接的右下角位置。开始时它们的宽度都被设置为0。

.link-1 a.demo:before, .link-1 a.demo:after {
  content: '';
  border-bottom: solid 1px white;
  position: absolute;
  bottom: 0;
  width: 0;
}

.link-1 a.demo:before { left: 0; }
.link-1 a.demo:after { right: 0; }                  
                

在鼠标滑过超链接时，:before和:after伪元素的宽度分别被增加50%，形成线条从两侧向中间延伸的动画效果。

.link-1 a.demo:hover:before, .link-1 a.demo:hover:after {
  width: 50%;
}

.link-1 a.demo:before, .link-1 a.demo:after {
  -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease;
}                  
                

其它超链接动画效果的实现也非常简单，具体请参考下载文件。