如何實作我的CSS過渡到我的網站-有解無憂

我必須創建如下按鈕影片：https : //media.giphy.com/media/YLgJHbH1u916XSo3JD/giphy.gif

我用“過渡”做了它，但現在無法在我的網站上實施該解決方案。我的按鈕影片解決方案：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;
}

uj5u.com熱心網友回復：

嘗試這個：

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

uj5u.com熱心網友回復：

你想要這個嗎？

試試這個代碼：

 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/367839.html

標籤：css 按钮蠢货 css动画 css-transitions

上一篇：將圖示添加到CSS拉選項卡按鈕的右側

下一篇：后退按鈕的位置總是在頁面的右下方