Question

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

当悬停在4个链接中的一个上时，它会改变颜色，我想要的是一个与http://jsfiddle.net/xnTZq/6/几乎相似的扩展动画，只是不改变形状，它改变颜色并可能扩展到形状。

下面是我的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>

CSS：

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

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

Answer 1

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

.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和标准转换。

Answer 2

将此添加到您的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;        
}

Answer 3

只需将过渡语句从小提琴复制到{}和a：hover {}，然后将其他圆边添加到：hover {}。

在<li>按钮</li>上创建扩展动画

3 个答案: