Question

我的菜单上有此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;

Answer 1

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

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>

如何在鼠标移出时从右向下划线宽度设置动画？

1 个答案: