文本/链接
7种鼠标滑过超链接动画特效
PetitQ
这是一组效果很酷的鼠标滑过超链接元素时的动画特效。这组超链接动画效果使用伪元素来制作超链接的下划线，并使用 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>元素的: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;
}
其它超链接动画效果的实现也非常简单，具体请参考下载文件。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
