时间戳

首页 > 解决方案 > 向后导航动画

html - 向后导航动画

问题描述

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

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;
}

标签： htmlcss

解决方案

您想更改多项内容，因为某些 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>

推荐阅读