Javascript 在<；李>；按钮

我用UL列表创建了一个菜单栏

当鼠标悬停在4个链接之一时，它改变了颜色，我想要的是一个扩展动画，几乎与不改变形状相似，它改变了颜色，并可能扩展到形状

下面是我的HTML和CSS代码

HTML:

<div class="menu">
    <ul>
        <li id="active"><a href="index.html">Home</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>

    .menu {
    width: 960px;
    height: 35px;
    text-align: center;
    background-color: #17ADE0;  
    }

.menu ul {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
}   

.menu li {
    display: inline; 
    padding: 20px; 
}

.menu a {
    text-decoration: none;
    color: #FFF;
    padding: 8px 20px 6px 20px;
    -moz-border-radius-topright: 50px;
    -webkit-border-top-right-radius: 50px;
    -moz-border-radius-bottomright: 50px;
    -webkit-border-bottom-right-radius: 50px;
    -moz-border-radius-topleft: 50px;
    -webkit-border-top-left-radius: 50px;
    -moz-border-radius-bottomleft: 50px;
    -webkit-border-bottom-left-radius: 50px;
}

.menu a:hover {
    color: #17ADE0;
    background-color: #FFF;
}

.menu a:active {
    color: #17ADE0;
    background-color: #FFF;
}

#active a {
    color: #17ADE0;
    background-color: #FFF;
}

.menuinfo {
    width: 960px;
    height: 35px;
}

如果您需要更多我的代码，请告诉我。

将此添加到您的CSS中

li {
    -webkit-transition:all 0.3s ease-in-out;    
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;        
}

---

只需将转换语句从fiddle复制到a{}和a:hover{}，并将其他圆边添加到a:hover{}。

您甚至可以使用四个转换声明进行调整，以使用自定义顺序、延迟和计时函数为每个转换设置动画：

.menu a:hover {
  ...
  transition-property: background-color, border-radius;
  transition-duration: 0.5s, 0.3s;
  transition-delay: 0, 0.2s;
  transition-timing-function: ease-out, ease;
}

---

如果你想要完全兼容浏览器，你应该调用-moz、-o、-webkit和standard transitions。

下面是我发现的一个例子：这就是你想要的吗？