创建CSS3漂亮的动画菜单.doc

创建CSS3漂亮的动画菜单
使用CSS3可以打造出非常漂亮的导航效果，在今天的教程中我将创建菜单项悬停效果，很容易地通过编辑css文件进行自定义，没有使用任何图像,我会在水平和垂直位置的背景按钮进行动画处理。当你把鼠标移到菜单项的时间，将会涌现非常腻滑的滑动结果，下面就一路来看看这个简朴美丽的CSS3动画菜单吧。
我希望这些css3菜单示例会派上用场也许你没有灵感，创建您自己的导航菜单。(谷歌,火狐浏览器最佳),喜欢这个效果的话欢迎留言交流。

HTMLCODE
菜单结构是相当简单的。我们将使用一个无序的列表项。您可以使用它从谷歌的字体库。此外可以浏览库并选择适合你的总体设计的其他字体。
<ulclass="demo1">
<li><ahref="#">Home</a></li>
<li><ahref="#">Services</a></li>
<li><ahref="#">Gallery</a></li>
<li><ahref="#">About</a></li>
<li><ahref="#">Contact</a></li>
</ul>
CSSCODE
在下列示例中我将展示您为每个菜单应用的样式。
Example1

第一个示例中，我们将设置每个菜单项的背景宽度。宽度值会0表示处于正常状态的元素，并赋予一个50%在悬停状态的值。根据您的需要，您可以更改此值。
.demo1li{
background-color:rgba(238,238,238,1);
-webkit-transition:all0.3sease-in-out0s;
-moz-transition:all0.3sease-in-out0s;
-o-transition:all0.3sease-in-out0s;
-ms-transition:all0.3sease-in-out0s;
transition:all0.3sease-in-out0s;
padding-left:1%;
height:50px;
min-height:50px;
width:0;
font-family:"Oswald";
font-size:20px;
}
padding-left属性使您可以修改垂直宽度。
.demo1li:hover{
background-color:rgba(238,238,238,1);
-webkit-transition:all0.3sease-in-out0s;
-moz-transition:all0.3sease-in-out0s;
-o-transition:all0.3sease-in-out0s;
-ms-transition:all0.3sease-in-out0s;
transition:all0.3sease-in-out0s;
width:50%;
}
Example2

第二个例子是与第一个非常相同。只更改背景。
.demo2{
background-color:rgba(179,234,255,1);
width:50%;
}
Example3

在此示例中在浏览器的页的顶部，把高度属性添加动画效果。若要创建一个色彩鲜艳的菜单，您可以为每个菜单项以不同的颜色。
.demo3li{
float:left;
background-color:rgba(90,183,60,1);
-webkit-transition:all0.3sease-in-out0s;
-moz-transition:all0.3sease-in-out0s;
-o-transition:all0.3sease-in-out0s;
-ms-transition:all0.3sease-in-out0s;
transition:all0.3sease-in-out0s;
height:0;
font-family:"Oswald";
font-size:20px;
padding:5px0px0px0px;
}

.demo3li:hover{
background-color:rgba(90,183,60,1);
-webkit-transition:all0.3sease-in-out0s;
-moz-transition:all0.3sease-in-out0s;
-o-transition:all0.3sease-in-out0s;
-ms-transition:all0.3sease-in-out0s;
transition:all0.3sease-in-out0s;
height:80px;
}
Example4

此示例中的结构有点不同，因为我们将使用一个div作为专业的页面动画布局。
<ulclass="demo4">
<li><divcl