Question

我正在尝试进行颜色过渡，但我不知道如何制作颜色会逐渐添加而不增加大小的效果。

     a:hover{
        background-color:#c0392b; 
        transition: 1000ms linear;
        padding:20px;

        <nav class="navigation-in-center">
            <ul class="container menu group">
                <li><a href="#">A PROPOS</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">IDEES</a></li>
                <li><a href="#">CHEQUES CADEUX</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>

Answer 1

由于padding，您的尺寸正在增加。
移除 padding 并将 transition 应用于 a 元素，而不是处于悬停状态：

a {
  transition: all 1000ms linear;
}
a:hover {
  background-color: #c0392b;
}

<nav class="navigation-in-center">
  <ul class="container menu group">
    <li><a href="#">A PROPOS</a></li>
    <li><a href="#">SERVICES</a></li>
    <li><a href="#">IDEES</a></li>
    <li><a href="#">CHEQUES CADEUX</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</nav>

Answer 2

您应该只为“背景颜色”添加过渡。过渡：背景颜色 1000 毫秒线性；

a{
display: inline-block;
  padding:20px;
   transition: background-color 1000ms linear;
}
a:hover{
        background-color:#c0392b; 
       }

<nav class="navigation-in-center">
            <ul class="container menu group">
                <li><a href="#">A PROPOS</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">IDEES</a></li>
                <li><a href="#">CHEQUES CADEUX</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>

颜色过渡

2 个答案: