您现在的位置是：网站首页> 编程资料编程资料

使用CSS3创建动态菜单效果css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

2021-09-05 965人已围观

简介 这篇文章主要介绍了使用CSS3创建动态菜单效果,可以先看文中开头demo演示的效果,需要的朋友可以参考下

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

2015710155522789.jpg (401×245)
　Demo演示

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

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

XML/HTML Code复制内容到剪贴板
  1. <div class="css3Menus">     
  2. <ul>     
  3.     <li>Menu1li>     
  4.     <li>Menu2li>     
  5.     <li>Menu3li>     
  6. ul>     
  7. div>  

　　第二步：设置菜单的背景

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

CSS Code复制内容到剪贴板
  1. ."width: auto; height: auto; float: none;" id="4_nwp">"text-decoration: none;" mpid="4" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=e2fbae28688be8a0&k=css3&k0=css3&kdi0=0&luki=10&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=a0e88b6828aefbe2&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2453%2Ehtml&urlid=0" id="4_nwl">"color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">css3Menus {     
  2. background: #14080a;     
  3. width:506px;     
  4. height:260px;     
  5. padding:20px;     
  6. }  

　　如下图：
2015710154701055.jpg (500×258)

第三步：利用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. }  

　　菜单看起来呈下面样子：
2015710155427772.jpg (500×275)

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

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

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

　　现在菜单看起来呈下面样子：
2015710155130736.jpg (500×269)

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

CSS Code复制内容到剪贴板
  1. li a {     
  2. color:#FFF;     
  3. text-decoration:none;     
  4. display:"width: auto; height: auto; float: none;" id="2_nwp">"text-decoration: none;" mpid="2" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=e2fbae28688be8a0&k=block&k0=block&kdi0=0&luki=7&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=a0e88b6828aefbe2&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2453%2Ehtml&urlid=0" id="2_nwl">"color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">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. }  

　　菜单现阶段的样子：

2015710155156656.jpg (500×267)

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

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

　　菜单样式如图：
2015710155217940.jpg (500×273)

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

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-iter

    上一篇：高效编写CSS代码的建议汇总CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

    下一篇：使用CSS3来制作消息提醒框

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网