Question

我基本上是想在我的导航中添加一个动画，所以当用户将鼠标悬停在链接上时，文本颜色会以蓝色渐变，然后逐渐消失为黑色。我已经阅读了过渡属性，并在Youtube上观看了一些教程，但是当我将它应用到我自己的导航栏时，我无法使用它。

以下是我的Codepen的链接，如果有人能够解释我真正感激的问题......

由于

HTML：

<!-- header starts here -->
<header>
    <nav>
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="">Contact</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Service</a></li>
       </ul>
    </nav>
</header>

http://codepen.io/Clarkpen/pen/razMWB

Answer 1

试试这里：

http://codepen.io/anon/pen/myMrRq

我在锚点上加了一个转换：

nav ul li a {
  transition:all 400ms ease-in;
}

请注意，最好添加供应商前缀：

nav ul li a {
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 1400ms ease-in-out;
  -o-transition: all 400s ease-in-out;
  transition: all 400ms ease-in-out;
}

修改

我在这里编辑了您的codepen，只将转换添加到导航链接：

http://codepen.io/anon/pen/RNZGpL

Answer 2

 nav ul{margin:0px;padding:0px;}
 nav ul li{float:left;list-style:none;}
 nav ul li a{text-decoration:none; padding:15px; color:#666; text-transform:uppercase;transition:ease-in 0.5s;-webkit-transition:ease-in 0.5s;-ms-transition:ease-in 0.5s;-moz-transition:ease-in 0.5s;}
 nav ul li a:hover{background:#F00; color:#FFF;}

<nav>
  <ul>
    <li><a href="javascript:;">Home</a></li> 
    <li><a href="javascript:;">About US</a></li> 
    <li><a href="javascript:;">Products</a></li> 
    <li><a href="javascript:;">Feedback</a></li> 
    <li><a href="javascript:;">Contact</a></li> 
  </ul>
</nav>

Demo

如何将过渡应用于导航元素？

2 个答案: