Question

我正在尝试进行CSS转换，当您将鼠标悬停在href元素上时，下划线会从下到上显示。

我找到了这个例子，它创建了一个在悬停时从左到右显示的下划线。

a {
    text-decoration: none;
    border-bottom: 1px solid blue;    
    margin-right: 39px; 
    width: 0px;
    -webkit-transition: 0.3s ease;
            transition: 0.3s ease;
}

a:hover {
    -webkit-transition: 0.3s ease;
            transition: 0.3s ease;
    border-bottom: 1px solid blue;
    width: 30px;
    margin-right: 9px;
}

如何修改以在悬停时从下到上创建下划线？

感谢您的帮助，

感谢

Answer 1

我希望这个动画能够使用css关键帧满足您的需求：

<强> Live Demo

<强> CSS

a {
    text-decoration: none;     
    margin-right: 39px; 
    width: 0px;
    -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
}



a:hover span{
    position: absolute;
    top: 24px;
    border-top: 1px solid blue;
    width: 120px;
    margin-right: 9px;
    -webkit-animation: mymove infinite 1s alternate;
    -o-animation: mymove infinite 1s alternate;
    animation: mymove infinite 1s alternate;
    -webkit-transition: 0.9s ease;
            transition: 0.9s ease;

}

@-webkit-keyframes mymove {
    from {top: 24px;}
    to {top: 9px;}
} 

/* Standard syntax */ 
@keyframes mymove {
    from {top: 24px;}
    to {top: 9px;}
}

另一个版本 Live Demo

CSS过渡下划线显示

1 个答案: