学校地址
首页> 翱翔就业 > 在线学习 > 不用图片和JS，照样创建绚丽的动态CSS3菜单

不用图片和JS，照样创建绚丽的动态CSS3菜单

发布时间：2013-07-21作者： 邯郸翱翔

该教程，我们将讨论CSS3的一些新功能和新特性，并教你在不使用图片和JavaScript的情况下，如何制作酷炫的圆形导航菜单。该实例将用到CSS3的新特性： border-radius和animati
 

该教程，我们将讨论CSS3的一些新功能和新特性，并教你在不使用图片和JavaScript的情况下，如何制作酷炫的圆形导航菜单。该实例将用到CSS3的新特性： border-radius和animation。


 

Demo演示  下载代码

第一步：编辑菜单的HTML代码

菜单包含三个列表项，分别取名为“Menu1”、“Menu2”、“Menu3”。

Html代码 
  1. <div class=“css3Menus”>    
  2. <ul>    
  3.     <li>Menu1</li>    
  4.     <li>Menu2</li>    
  5.     <li>Menu3</li>    
  6. </ul>    
  7. </div>   

第二步：设置菜单的背景

在该步骤中，我们将把导航的背景设置为黑色。宽度、高度和内边距为可选项，可以不设置。

Css代码 
  1. .css3Menus {    
  2. background: #14080a;    
  3. width:506px;    
  4. height:260px;    
  5. padding:20px;    
  6. }    

如下图：


 

第三步：利用border-radius，制作圆形导航。

该步中，我们会利用CSS3的一些酷的功能，尤其是border-radius ，将每个列表项的背景设置为黄色，形状为圆形。 

Css代码 
  1. ul {    
  2. list-style: none;    
  3. }    
  4.     
  5. li {    
  6. float:left;    
  7. font: 14px/10px Arial, Verdana, sans-serif;    
  8. color:#FFF;    
  9. background-color:#CCCC00;    
  10. width: 80px;    
  11. height: 80px;    
  12. padding:20px;    
  13. margin:0 30px 0 0;    
  14. -webkit-border-radius: 60px;    
  15. -moz-border-radius: 60px;    
  16. border-radius: 60px;    
  17. }    

菜单看起来呈下面样子：


 

第四步：设置菜单的对齐方式

本步骤中，我们将为每个列表项设置特定的背景颜色与位置：

Css代码 
  1. li#menu1 {    
  2. background-color: #00FFCC;    
  3. }    
  4. li#menu2 {    
  5. background-color: #CC9900;    
  6. margin-top:100px;    
  7. }    
  8. li#menu3 {    
  9. background-color: #33FF66;    
  10. margin-top:50px;    
  11. }    

现在菜单看起来呈下面样子：


 

第五步：设置菜单中链接的对齐方式

Css代码 
  1. li a {    
  2. color:#FFF;    
  3. text-decoration:none;    
  4. display:block;    
  5. width: 80px;    
  6. height: 45px; text-align: center;    
  7. padding:35px 0 0 0;    
  8. margin:0 40px 0 0;    
  9. -webkit-border-radius: 40px;    
  10. -moz-border-radius: 40px;    
  11. border-radius: 40px;    
  12. }    
  13. li#menu1 a {    
  14. background-color: #FF0000;    
  15. }    
  16. li#menu2 a {    
  17. background-color: #660033;    
  18. }    
  19. li#menu3 a {    
  20. background-color: #66CCCC;    
  21. }    

菜单现阶段的样子：


 

第六步：定义另一种效果，当鼠标悬浮在链接上时进行展现 

Css代码 
  1. li a:hover,    
  2. li a:focus,    
  3. li a:active {    
  4. width: 120px;    
  5. height:65px;    
  6. padding:55px 0 0 0;    
  7. margin:-20px 0 0 -20px;    
  8. -webkit-border-radius: 60px;    
  9. -moz-border-radius: 60px;    
  10. border-radius: 60px;    
  11. }    

菜单样式如图：


 

第七步：最后为导航增加动画效果

Css代码 
  1. li a:hover,    
  2. li a:focus,    
  3. li a:active {    
  4. -webkit-animation-name:bounce;    
  5. -webkit-animation-duration:1s;    
  6. -webkit-animation-iteration-count:4;    
  7. -webkit-animation-direction:alternate;    
  8. }    
  9. @-webkit-keyframes bounce{from{margin:0 40px 0 0;}    
  10. to{margin:120px 40px 0 0;}    
  11. }    

菜单所产生的动画效果：


  

结论

通过上面教程，你已经学到如何制作酷的动画菜单。在制作过程中不需要使用JavaScript和图片，只需要使用CSS3的一些酷的特性即可。该菜单可以完美地运行于Chrome和Safari浏览器。在Firefox浏览器中，无法看到动画效果。

热门咨询: 邯郸翱翔就业汇总 it培训一般需要多少钱？ 零基础能学会吗？
相关搜索

热门信息

预约免费试听课

热点关注

  • 大学生学什么好？
  • 高中生学什么好？
  • 初中生学什么技术好
  • 待业学什么好
  • 转行学什么好？

热门课程

关于我们
翱翔简介
青鸟简介
诚聘精英
在线咨询
热门课程
BCSP软件开发专业
云计算专业
大数据专业
Web前端专业
java开发专业
翱翔就业
就业案例
翱翔荣誉
免费咨询电话：
15333301535
微信公众号
微信公众号
咨询加微信
咨询加微信
Copyright © 2026-邯郸市翱翔技工学校 版权所有 冀公网安备13040202000903号 冀ICP备13021056号-1
微信 公众号 在线咨询 免费课程