CSS3 菜单栏动画

今天看到一个漂亮的动画,也为是用jQuery实现的,偷窥代码也没有发现啥jQuery,于是找了半天终于找到了,它是用CSS3动画实现的,现在给大家做个演示吧~~不过只支持非IE内核浏览器~~
下面是一个菜单栏。

看看他的载入效果!~怎么样~~
下面就是他的样式了,有兴趣的可以试试看去~~
DIV结构,很简单

<code>
<div id="menu">        
    <a href="#" title="blog">博客</a>
    <a href="#" title="photo">相册</a>
    <a href="#" title="blog">夜枫</a>
    <a href="#" title="photo">回忆</a>
    <a href="#" title="blog">美好</a>
    <a href="#" title="photo">未来</a>
</div>
</code>

关键是css样式了。

<code>
<style type="text/css">
    #menu {display:block;height:30px;overflow:hidden;margin:0 auto 10px;line-height:30px;text-align:center;background:#3D9DFD;color:#0B64BD;
    -moz-animation-name: my_menu;-moz-animation-duration: 500ms;-moz-animation-timing-function: ease-out;
    -webkit-animation-name: my_menu;-webkit-animation-duration: 500ms;-webkit-animation-timing-function: ease-out;
}
@-moz-keyframes my_menu {
    0% {width:0%;opacity:0;
        -moz-border-radius:15px;
        border-radius:15px;
    }
    70% {width:10%;
        -webkit-border-radius:15px;
        border-radius:15px;
    }
    80% {width:40%;}
    90% {width:70%;}
    100% {width:100%;opacity:1;
        -moz-border-radius:0;
        border-radius:0;
    }
}
@-webkit-keyframes my_menu {
    0% {width:0%;opacity:0;
        -webkit-border-radius:15px;
        border-radius:15px;
    }
    70% {width:10%;
        -webkit-border-radius:15px;
        border-radius:15px;
    }
    80% {width:40%;}
    90% {width:70%;}
    100% {width:100%;opacity:1;
        -webkit-border-radius:0;
        border-radius:0;
    }
}
#menu a:link, #menu a:visited {color:ffffff; font-size:14px; padding:0 10px 0 10px}
#menu a:hover {color:#FFE103;}
</style>
</code>

0 thoughts on “CSS3 菜单栏动画
添加一条新回复 回到顶部

亲爱的,主人已经关闭了这篇文章的评论 。