创建扩展动画<灯光>按钮

Create expanding animation on <li> button

本文关键字：灯光 按钮 扩展 动画 创建      更新时间：2023-09-26

我使用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;
}

您甚至可以调整四个转换声明，为每个转换设置自定义顺序，延迟和定时功能的动画:

.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和标准过渡。

添加到你的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{}。

相关文章：