今天看到一个漂亮的动画，也为是用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>
<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>
<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>