链接下划线动画效果

最近，我在构建这个网站的时候，加了个很有意思的效果。当你在首页把鼠标移到标题上的时候，链接的下划线就会从链接的中间向两边延伸开来。相信你已经注意到了吧！

要实现这个效果灰常的简单，不需要添加而外的DOM元素到HTML上。如果浏览器不支持CSS动画的话(那就只是一个普通的下划线而已)。

首先，我们需要把text-decoration设为none，并且添加position: relative。

.entry-title a {
	position: relative;
	display: inline-block;
	color: #333;
}

然后，我们给链接添加一个:before，并且将scale缩放为0，并且给他一个过渡效果transition: transform 0.3s cubic-bezier(0.7,0,0.3,1)。告诉它动画持续0.3秒，动画效果为贝塞尔曲线cubic-bezier(0.7,0,0.3,1)。

.entry-title a:before{
	content: '';
	width: 100%;
	height: 2px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	background: #333; 
	visibility: hidden;

	/* 缩放 */
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);

	/* 过渡效果 */
	-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.7,0,0.3,1);
	-moz-transition: -moz-transform 0.3s cubic-bezier(0.7,0,0.3,1);
	-ms-transition: -ms-transform 0.3s cubic-bezier(0.7,0,0.3,1);
	transition: transform 0.3s cubic-bezier(0.7,0,0.3,1);
}

最后，当鼠标滑动到链接的时候，让:before元素的scale还原为1。

.entry-title a:hover:before{
	visibility: visible;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

大功告成。去首页看看效果吧！

前端开发