向后导航动画答案

【问题标题】：Navigation animation backwards向后导航动画
【发布时间】：2021-09-08 14:18:18
【问题描述】：

为什么导航栏上的动画，那条红线，如果你在nav li a::after 上设置了 100% 的宽度，它会向后工作，而不是从左到右，它应该如何或我想要的？

HTML

        <nav>
            <ul>
                <li><a href="index.php">Domů</a></li>
                <li><a href="switcher.php">Fun Switcher</a></li>
                <li><a href="#">Radio</a></li>
                <li><a href="#">Fotky</a></li>
                <li><a href="#">Games</a></li>
                <li><a href="#">Chat</a></li>
            </ul>
        </nav>

CSS

nav {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background: linear-gradient(#ffffff, #f5f5f5);
    grid-area: nav;
    font-weight: bold;
}

nav ul {
    list-style: none;
    margin: 0;
    display: flex;
    justify-content:flex-start;
    align-items: center;
    padding: 1em 0;
}

nav li a {
    text-decoration: none;
    color: #000000;
    padding-left: 3em;
    position: relative;
    transition: all ease-in-out 250ms;
}

nav li a::after {
    content:'';
    position: absolute;
    display: block;
    height: 0.4em;
    background-color: red;
    bottom: -1em;
   /* width: 100%; look for whole line */
    transition: all ease-in-out 250ms;
}

nav li a:hover::after {
    width: 60%;
}

nav li a:hover{
    color: red;
}

【问题讨论】：

因为 div 是向后设置的，字体设置在右侧。我要检查代码以找到解决方案

标签： html css

【解决方案1】：

您想要更改多项内容，因为某些 css 属性不适合您的 html 类...

nav {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background: linear-gradient(#ffffff, #f5f5f5);
    grid-area: nav;
    font-weight: bold;
}

nav ul {
    list-style: none;
    margin: 0;
    display: block;
}

nav li {
    padding: 13px 20px;
    display: inline-block;
}

nav li a {
    text-decoration: none;
    color: #000000;
    position: relative;
    transition: all ease-in-out 250ms;
}

nav li a::after {
    content:'';
    position: absolute;
    display: block;
    height: 0.4em;
    background-color: red;
    bottom: -1em;
   /* width: 100%; look for whole line */
    transition: all ease-in-out 350ms;
    left: 0;
    width:0;
}

nav li a:hover::after {
    width: 100%;
}

nav li a:hover{
    color: red;
}

 <nav>
        <ul>
            <li><a href="index.php">Domů</a></li>
            <li><a href="switcher.php">Fun Switcher</a></li>
            <li><a href="#">Radio</a></li>
            <li><a href="#">Fotky</a></li>
            <li><a href="#">Games</a></li>
            <li><a href="#">Chat</a></li>
         </ul>
 </nav>

【讨论】：

【解决方案2】：

这对您来说是一个可接受的解决方案吗？

`a{
  display: flex;
  align-items: center;
  justify-content: center;
  }`

将此添加到您的 css 代码中

这是我的代码笔： https://codepen.io/oskedram/pen/abWREpg

【讨论】：

@Kernel Panic 告诉我什么时候出现问题
那么，将线条居中，这很酷。但是我想从左侧到右侧使用该动画，当您将光标放在任何导航元素上时..它仍然将动画从右侧更改为左侧....我不知道出了什么问题
@Kernel Panic 所以你想动画它从左到右像加载条一样开始，还是你想让红线更多地放在左边？
nav li a { text-decoration: none; color: #000000; padding-left: 3em; position: relative; display: flex; } 将线设置到左侧，所以很好.. 但是当我想用 transition: all ease-in-out 250ms; 从左侧到右侧制作动画时，它从右侧工作到左侧。我想制作从左侧到右侧的动画
如果对你有帮助，我想让那条线像那样工作，只有当你将光标移动到该菜单文本<div></div><style> div { width: 100px; height: 100px; background: red; transition: all ease-in-out 250ms; } div:hover { width: 100%; } </style> 上时，这条线才会可见