实现鼠标悬浮链接底部出现横线

快乐打工仔 分类:实例代码

鼠标悬浮链接底部出现横线属于前端实例代码,有关更多实例代码大家可以查看

分享一段代码实例,它实现了鼠标悬浮链接,链接底部会出现横线。

横线的出现具有动画效果,代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
*{
  margin:0;
  padding:0;
}
ul,li{
  list-style:none;
}
.nav ul li{
  float:left;
  text-align:center;
  height:80px;
  line-height:80px;
  margin:0 10px;
}
.nav ul li a{
  display:block;
  font-size:16px;
  height:80px;
  border-bottom:2px solid transparent;
  padding:0 25px;
  position:relative;
}
.nav ul li a::after {
  border-bottom:2px solid #f58220;
  right:0;
  content:"";
  position: absolute;
  left: 0;
  opacity: 0;
  transform:scaleX(0);
  transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1);
  top:78px;
}
.nav ul li:hover a::after,.nav ul li.cur a::after{
  opacity:1;
  transform:scaleX(1);
}
</style>
</head>
<body>
<nav class="nav">
  <ul>
    <li><a href="">犀牛前端部落一</a></li>
    <li><a href="">犀牛前端部落二</a></li>
    <li><a href="">犀牛前端部落三</a></li>
  </ul>
</nav>
</body>
</html>

鼠标悬浮链接底部出现横线,这样的场景在实际项目中还是用的比较多的,关于鼠标悬浮链接底部出现横线就介绍到这了。

回复

我来回复
  • 暂无回复内容