這個簡單的動畫加載是由中間向兩邊擴展的效果，比較簡單。這部分內容是參看的W3CPLUS上的文章。
<body>
<div class="box">
<div id="nav">
<a href="http://blog.linux.de/" title="林小志的個人工作學習博客日誌">小志博客</a>-
<a href="http://www.linuxz.de/my_flickr_photo.php">小志的照片</a>-
<a href="http://blog.linuxz.de/css_book" title="林小志編寫的第一本技術類書籍--《css那些事》">《css那些事》</a>-
<a href="http://www.linxz.de/tianyizone/" title="添翼地帶爲你解決CSS佈局網站在各個瀏覽器中的兼容問題，並提供各類模板下載，在CSS能實現的前提下，只有你想不到的，沒有你要不到的頁面！">添翼地帶</a>-
<a href="http://lab.linxz.de" title="林小志的個人代碼demo測試列表頁面">linxz's lab</a>-
<a href="http://www.linxz.de/css_tool/" title="自制的幾個關於CSS的小工具，比如圖片垂直水平居中、背景透明文本不透明等">CSS小工具</a>-
<a href="http://box.linxz.de/" title="亂寫盒子，方便與他人交流xhtml+css問題">>亂寫盒子</a>
</div>
<div class="linxz_copy">
<a target="_blank" href="http://www.miibeian.gov.cn">浙ICP備<span style="font-family:Georgia;font-size:11px;">08014068</span>號</a>
</div>
</div>
</body>body{
font-size: 12px;
font-family: "microsoft Yahei",Simsun,Arial,"Lucida Grande",tahoma;
margin: 0;
background: #f8f8f8;
}.box{
position: absolute;
width: 100%;
height: 70px;
top: 39%;
}
a{
color: #333;
text-decoration: none;
-moz-transition:color 500ms linear;
-webkit-transition:color 500ms linear;
}
a:hover{
color: #f00;
}
#nav a {
color: #fff;
}
#nav a:hover {
color: #a8ff00;
}
img{
border: 0 none;
}
.linxz_copy {
width: 100%;
height: 30px;
margin: 0 auto;
text-align: center;
}
@-moz-keyframes my_nav{
0% {
width: 0%;
opacity: 0;
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_nav{
0% {
width: 0%;
opacity: 0;
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;
}
}
@keyframes my_nav{
0% {
width: 0%;
opacity: 0;
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;
}
}#nav{
display: block;
height: 30px;
overflow: hidden;
/*上0下10左右自適應*/
margin: 0 auto 10px;
line-height: 30px;
text-align: center;
background: #222;
color: #fff;
-moz-animation-name: my_nav;
-moz-animation-duration: 500ms;
-moz-animation-timing-function: ease-out;
-webkit-animation-name: my_nav;
-webkit-animation-duration: 500ms;
-webkit-animation-timing-function: ease-out;
animation-name: my_nav;
animation-duration: 500ms;
animation-timing-function: ease-out;
}
