189 8069 5689

CSS3中怎么创建一个动态菜单效果

本篇文章为大家展示了CSS3中怎么创建一个动态菜单效果，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、微信平台小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了万安免费建站欢迎大家使用！

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

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

XML/HTML Code复制内容到剪贴板

  1.      

    2.      

    •     

    • Menu1
      •      

    •     

    • Menu2
      •      

    •     

    • Menu3
      •      

         

  

　　第二步：设置菜单的背景

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

CSS Code复制内容到剪贴板

  1. .css3Menus {     

  2. background: #14080a;     

  3. width:506px;     

  4. height:260px;     

  5. padding:20px;     

  6. }  

如下图：
CSS3中怎么创建一个动态菜单效果

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

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

CSS Code复制内容到剪贴板

  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. }  

菜单看起来呈下面样子：
CSS3中怎么创建一个动态菜单效果

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

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

CSS Code复制内容到剪贴板

  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. }  

现在菜单看起来呈下面样子：
CSS3中怎么创建一个动态菜单效果

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

CSS Code复制内容到剪贴板

  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. }  

菜单现阶段的样子：

CSS3中怎么创建一个动态菜单效果

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

CSS Code复制内容到剪贴板

  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. }  

菜单样式如图：
CSS3中怎么创建一个动态菜单效果

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

CSS Code复制内容到剪贴板

  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. }  

菜单所产生的动画效果：
CSS3中怎么创建一个动态菜单效果

上述内容就是CSS3中怎么创建一个动态菜单效果，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。


网站名称：CSS3中怎么创建一个动态菜单效果
文章链接：http://cdxtjz.cn/article/goeoid.html

其他资讯