下划线hover下动态出现技巧

Posted 2021-01-01 zhangzhiyong

    酷炫的动画效果往往更能吸引眼球，下面我将分享纯CSS中，hover的时候出现下划线动态飞入的技巧。

1.下划线从左侧飞入：

div::before{
    content:"";
    width:50px;
    position:absolute;
　　display:inline-block;
　　border-bottom:1px solid red;
    bottom:0;
    left:-100px；}
div:hover::before{
    left:0;
    transition:all linear 1s;}

　　步骤：首先是设置div为相对位置（relative，主要用于before子元素的定位。因为绝对位置的定位要求其父元素的position属性值不能为static，而relative优点在于能保留原来的位置，故选用relative）。

　　　　　其次通过伪元素before创建div元素下的第一个位置的子元素，设置其为绝对位置（absolute），同时修改其显示属性为行内块（display：inline-block；）。

　　　　   第三是设置伪元素before的位置，将其定位到div父元素的前面，同时设置div隐藏区域以外的区域（overflow：hidden；）

　　　　   第四是设置当div被hover时，伪元素before回到div父元素的最左侧，并设置持续时间。

　　　　这样就完成了下划线在hover时从左侧并入。如果要从右侧出现，则只需把相应位置进行更新即可。

2.下划线从中间向两边伸出

div::before{
    content:"";
    width:0px;
    position:absolute;
　　display：inline-block；
    border-bottom:0px solid red;
    bottom:0;
    left:50%；
    transition:all linear 1s;}
div:hover::before{
left:0;
width:50px;
border-bottom-width:2px;
}

　　下划线从中间向两边伸出大部分与下划线从两边伸出相似，不同之处在于：

　　　　首先设置子元素位置在中间，即left：50%，同时width：0px；

　　　　其次hover时设置子元素位置右中间变到最左侧（即left：0；）；同时设置子元素的宽度（即width：50px）。

 　　这样就能实现两个过程：一是下划线从中间向左侧整体移动，二是下划线向右侧延伸。