前端技巧鼠标指向按钮出现动画线条效果的实现方法

鼠标指向按钮出现动画线条效果的实现方法

灵活运用CSS的伪元素和过渡效果可以实现很多炫酷的样式,本文所实现的鼠标指向按钮出现动画线条效果就是这么实现的,下面就以一个简单的文字链接为例来做这个效果:

鼠标悬停效果.gif

<a class="button" href="#">Google</a>

这是一个最简单的文本链接,下面通过CSS给这个链接加入一些样式:

.button{
  text-decoration:none;
  font-family:Verdana;
  display:inline-block;
  background:#1a8;
  color:#fff;
  position:relative;
  line-height:100px;
  font-size:50px;
  padding:0 1em;
  transition:400ms ease all;
}

通过伪元素给这个“按钮”的上下各添加一个“边框”,但将其宽度设置为0,以便鼠标指向时的动画效果:

.button:before {
  content:" ";
  position:absolute;
  top:0;
  right:0;
  height:4px;
  width:0;
  background: #1a8;
  transition:all 300ms;
}
.button:after{
  content:" ";
  position:absolute;
  left:0;
  bottom:0;
  height:4px;
  width:0;
  background: #1a8;
  transition:all 300ms;
}

下面设置鼠标指向时的样式,链接背景颜色以及上下“边框”的变化:

.button:hover{
  background:#f9f9f9;
  color:#1a8;
}
.button:hover:before,.button:hover:after{
  width:100%; /*鼠标指向时,刚才加入的边框宽度从0变成100%*/
}

这样以来,这个鼠标指向链接的动画线条就做好了,该样式除了用于链接元素,还可以用于<button>按钮元素。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/133.html