时间戳

首页 > 解决方案 > 如何在鼠标移出时从右侧动画下划线宽度？

html - 如何在鼠标移出时从右侧动画下划线宽度？

问题描述

我的菜单上有这个 CSS 下划线动画效果代码。我想对其进行一些小改动——我需要它以与打开方式相同的方式关闭，只是向后。现在它从左到右打开，从两侧到中间关闭，我需要它从右到左关闭。

谢谢

编码：

#header-outer header#top nav >ul ul li a { display: inline-block; }

#header-outer header#top nav >ul ul li a:after {
    transition: transform .3s ease-out,border-color .3s ease-out;
    transform-origin: 100% 50%
    position: absolute;
    display: block;
    -ms-transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    border-top: 2px solid #fff;
    content: '';
}

#header-outer header#top nav >ul ul li a:hover:after {
    transform: scaleX(1);
    transform-origin: 0 50%;
}

body [data-dropdown-style="minimal"] .sf-menu >li >ul { box-shadow: none !important; }

header#top .sf-menu li ul li a:hover,
html body[data-dropdown-style="minimal"] #header-outer:not([data-format="left-header"]) header#top nav > ul > li:not(.megamenu) ul a:hover {
  background-color: transparent !important;

标签： htmlcss

解决方案

我制作了这个简单的边框动画，我认为它可以帮助您归档目标。

ul li a {
    display: inline-block;
}

ul li a:after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #000;
    transition: width .3s;
}

ul li a:hover:after {
    width: 100%;
}
<ul>
    <li><a href="">Test animation</a></li>
    <li><a href="">Test animation</a></li>
    <li><a href="">Test animation</a></li>
    <li><a href="">Test animation</a></li>
</ul>

推荐阅读