前端开发推荐-创建CSS3漂亮的动画菜单
使用CSS3可以打造出非常漂亮的导航效果，在今天的教程中我将创建菜单项悬停效果，很容易地通过编辑 css 文件进行自定义，没有使用任何图像, 我会在水平和垂直位置的背景按钮进行动画处理。当你把鼠标移到菜单项的时间，将会涌现非常腻滑的滑动结果，下面就一路来看看这个简朴美丽的CSS3动画菜单吧。
我希望这些 css3 菜单示例会派上用场也许你没有灵感，创建您自己的导航菜单。(谷歌,火狐浏览器最佳),喜欢这个效果的话欢迎留言交流
HTML CODE
菜单结构是相当简单的。我们将使用一个无序的列表项。您可以使用它从谷歌的字体库。此外可以浏览库并选择适合你的总体设计的其他字体。
1 <ul class="demo1"> 2 <li><a href="#">Home</a></li> 3 <li><a href="#">Services</a></li> 4 <li><a href="#">Gallery</a></li> 5 <li><a href="#">About</a></li> 6 <li><a href="#">Contact</a></li> 7 </ul>
CSS CODE
在下列示例中我将展示您为每个菜单应用的样式。
Example 1
第一个示例中，我们将设置每个菜单项的背景宽度。宽度值会 0 表示处于正常状态的元素，并赋予一个 50%在悬停状态的值。根据您的需要，您可以更改此值。
1 .demo1 li { 2 background-color: rgba(238, 238, 238, 1); 3 -webkit-transition: all 0.3s ease-in-out 0s; 4 -moz-transition: all 0.3s ease-in-out 0s; 5 -o-transition: all 0.3s ease-in-out 0s; 6 -ms-transition: all 0.3s ease-in-out 0s; 7 transition: all 0.3s ease-in-out 0s; 8 padding-left:1%; 9 height: 50px; 10 min-height: 50px; 11 width: 0; 12 font-family:"Oswald"; 13 font-size:20px; 14 }
padding-left属性使您可以修改垂直宽度。
1 .demo1 li:hover { 2 background-color: rgba(238, 238, 238, 1); 3 -webkit-transition: all 0.3s ease-in-out 0s; 4 -moz-transition: all 0.3s ease-in-out 0s; 5 -o-transition: all 0.3s ease-in-out 0s; 6 -ms-transition: all 0.3s ease-in-out 0s; 7 transition: all 0.3s ease-in-out 0s; 8 width:50%; 9 }
Example 2
第二个例子是与第一个非常相同。只更改背景。
.demo2 { background-color: rgba(179, 234, 255, 1); width:50%; }
Example 3
在此示例中在浏览器的页的顶部，把高度属性添加动画效果。若要创建一个色彩鲜艳的菜单，您可以为每个菜单项以不同的颜色。
1 .demo3 li { 2 float:left; 3 background-color: rgba(90, 183, 60, 1); 4 -webkit-transition: all 0.3s ease-in-out 0s; 5 -moz-transition: all 0.3s ease-in-out 0s; 6 -o-transition: all 0.3s ease-in-out 0s; 7 -ms-transition: all 0.3s ease-in-out 0s; 8 transition: all 0.3s ease-in-out 0s; 9 height:0; 10 font-family:"Oswald"; 11 font-size:20px; 12 padding:5px 0px 0px 0px; 13 } 14 15 .demo3 li:hover { 16 background-color: rgba(90, 183, 60, 1); 17 -webkit-transition: all 0.3s ease-in-out 0s; 18 -moz-transition: all 0.3s ease-in-out 0s; 19 -o-transition: all 0.3s ease-in-out 0s; 20 -ms-transition: all 0.3s ease-in-out 0s; 21 transition: all 0.3s ease-in-out 0s; 22 height:80px; 23 }
Example 4
此示例中的结构有点不同，因为我们将使用一个 div 作为专业的页面动画布局。
1 <ul class="demo4"> 2 <li><div class="link"><a href="#">Home</a></div><div class="mask"></div></li> 3 <li><div class="link"><a href="#">Services</a></div><div class="mask"></div></li> 4 <li><div class="link"><a href="#">Gallery</a></div><div class="mask"></div></li> 5 6 <div class="column-clear"></div> 7 </ul>
在 css 结构中的重要属性是吧他设置为隐藏
1 .demo4 li {overflow: hidden; 2 float:left; 3 margin-left:20px; 4 font-family:"Oswald"; 5 font-size:20px; 6 text-align:center; 7 background-color: rgba(255, 57, 57, 1); 8 width:120px; 9 height:60px; 10 position:relative; 11 color:#ffffff; 12 }
1 .demo4 li .mask { 2 width:120px; 3 height:60px; 4 position: absolute; 5 6 top: -60px; 7 left: 0; 8 background-color: rgba(170, 0, 0, 1); 9 -webkit-transition: all 0.3s ease-in-out 0s; 10 -moz-transition: all 0.3s ease-in-out 0s; 11 -o-transition: all 0.3s ease-in-out 0s; 12 -ms-transition: all 0.3s ease-in-out 0s; 13 transition: all 0.3s ease-in-out 0s; 14 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 15 filter: alpha(opacity=0); 16 opacity: 0; 17 z-index:1; 18 19 } 20 .demo4 li:hover .mask { 21 22 top:0px; 23 -webkit-transform: translateY(0px); 24 -moz-transform: translateY(0px); 25 -o-transform: translateY(0px); 26 -ms-transform: translateY(0px); 27 transform: translateY(0px); 28 -webkit-transition-delay: 0s; 29 -moz-transition-delay: 0s; 30 -o-transition-delay: 0s; 31 -ms-transition-delay: 0s; 32 transition-delay: 0s; 33 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=1)"; 34 filter: alpha(opacity=1); 35 opacity: 1; 36 }
