html5+css3 实现鼠标过境显示下边框,显示有过渡效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>qdabc.cn</title>
    <style>
ul li {
    float: left;    
    position: relative;
    width: 100px;
    list-style: none;
    line-height: 60px;
    margin: 0 5px;
    text-align: center;
}
ul li a{
text-decoration: none; 
color: red; 
display: block;
}
a:hover:before{
    -webkit-transform: scaleX(1);
    transform: scaleX(1);/* scaleX(x) 通过设置 X 轴的值来定义缩放转换。  */
}
a:hover{
   color: #59c7f9; 
}
a:before{
  position: absolute;
  width: 100%;
  height: 0;
  left: 0;
  bottom: -1px;
  content: "";
  border-bottom: 2px solid #59c7f9;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: -webkit-transform .25s ease;
  transition: transform .25s ease;
}
</style>

</head>
<body>
    <ul>
        <li>
            <a href="">首页</a>
        </li>        
        <li>
            <a href="">首页</a>
        </li>        
        <li>
            <a href="">首页</a>
        </li>        
        <li>
            <a href="">首页</a>
        </li>
    </ul>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » html5+css3 实现鼠标过境显示下边框,显示有过渡效果

赞 (2)
分享到:更多 ()

发表评论 0