如何实现我的 CSS 过渡到我的网站

Question

我必须创建按钮 animation 如下所示： https://media.giphy.com/media/YLgJHbH1u916XSo3JD/giphy.gif

我通过“过渡”做到了，但现在无法在我的网站上实施该解决方案。 我的按钮 animation 解决方案： http://jsfiddle.net/guhqcxzt/

我想在“li”标签上实现它的网站部分。 （html和scss）

 <nav class="left-side">
            <ul class="navigations">

                <li><a href="#">ABOUT US</a></li>


                <li><a href="#">HOTEL</a></li>


                <li><a href="#">CONTACT US</a></li>


            </ul>
            <div class="rights">&copy; 2021 All rights reserved.</div>
        </nav>

nav,
.left-side {
    @include flex(space-between, center, column);
    min-height: 90vh;
    background: $color-grey-dark-1;
    padding: 5rem 0 3rem 0;
    width: 18%;
    color: $color-grey-light-1;
}

.navigations {
    width: 100%;

    li {
        list-style: none;

        a {
            text-decoration: none;
            color: $color-grey-light-1;
            display: block;
            padding: 2rem 0;
            margin: 0.5rem 0;
            padding-left: 30%;
            font-size: 2.5rem;
        }
    }
}

a:hover {
    background: $color-primary-light;
}

Answer 1

尝试这个：

在<a>标签中添加过渡

navigations {
    width: 100%;
   li {
    list-style: none;

    a {
        text-decoration: none;
        color: $color-grey-light-1;
        display: block;
        padding: 2rem 0;
        margin: 0.5rem 0;
        padding-left: 30%;
        font-size: 2.5rem;
        transition:0.5s;
    }
}
}

a:hover {
    background: $color-primary-light;
}

Answer 2

你想要这个吗？

试试这个代码：

 nav,.left-side { display: flex; justify-content: space-between; align-items: center; flex-direction: column; min-height: 90vh; background: black; padding: 4rem 0 3rem 0; width:300px; color: grey; }.navigations { width: 100%; } li { position:relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; height: 100px; } li::before { content:''; position:absolute; width:0%; height:70px; background:red; left:-20px; transition:0.5s; } li:hover::before { width:100%; } a { position:relative; color: grey; margin: 0.5rem 0; width:92.4%; text-decoration:none; }.rights { font-size: 1.5rem; }

 <nav class="left-side"> <ul class="navigations"> <li ><a href="#">ABOUT US</a></li> <li><a href="#"> HOTE </a></li> <li><a href="#">CONTACT US</a></li> </ul> <div class="rights">&copy; 2021 All rights reserved.</div> </nav>