关于focus聚焦下划线的css3效果

作者: infi_ | 来源:发表于2017-11-23 17:32 被阅读0次

效果

TIM截图20171123173439.png

HTML部分

<div id="rect" style="text-align:center;line-height:200px;">213
       <div id="rect_in"></div>
    </div>

CSS 部分

    #rect{
        width:200px;
        height: 200px;
        position: relative;
        margin: 0 auto;
        border-bottom: 3px solid gray;
    }
    #rect_in{position: absolute;left: 0%;height: 0;width: 100%;
    transform:scaleX(0);
    bottom: -3px;
    transition: transform 0.3s linear;
    border-bottom: 3px solid red;}

JS 部分

    document.getElementById("rect").onmouseenter=function(){
      var div_=this.getElementsByTagName("div")[0] 
      div_.style.webkitTransform="scaleX(1)"
    }
    document.getElementById("rect").onmouseleave=function(){
        var div_=this.getElementsByTagName("div")[0]
        div_.style.webkitTransform="scaleX(0)"
    }