使用CSS3创建动态菜单效果


Posted in HTML / CSS onJuly 10, 2015

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

使用CSS3创建动态菜单效果
 Demo演示

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

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

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

第二步:设置菜单的背景

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

CSS Code复制内容到剪贴板
  1. .<span style="width: auto; height: auto; float: none;" id="4_nwp"><a style="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"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">css3</span></a></span>Menus {     
  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-stylenone;     
  3. }     
  4.     
  5. li {     
  6. float:left;     
  7. font14px/10px ArialVerdanasans-serif;     
  8. color:#FFF;     
  9. background-color:#CCCC00;     
  10. width80px;     
  11. height80px;     
  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:<span style="width: auto; height: auto; float: none;" id="2_nwp"><a style="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"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">block</span></a></span>;     
  5. width80px;     
  6. height45pxtext-aligncenter;     
  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. width120px;     
  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{<span style="width: auto; height: auto; float: none;" id="1_nwp"><a style="text-decoration: none;" mpid="1" 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=from&k0=from&kdi0=0&luki=2&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="1_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">from</span></a></span>{margin:0 40px 0 0;}     
  10. to{margin:120px 40px 0 0;}     
  11. }  

菜单所产生的动画效果:
使用CSS3创建动态菜单效果

结论

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

HTML / CSS 相关文章推荐
CSS3 选择器 属性选择器介绍
Jan 21 HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
html5使用canvas绘制文字特效
Dec 15 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 HTML / CSS
HTML中的表格元素介绍
Feb 28 HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 #HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 #HTML / CSS
CSS实现定位元素居中的方法
Jun 23 #HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 #HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 #HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 #HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 #HTML / CSS
You might like
用PHP发电子邮件
2006/10/09 PHP
windows xp下安装pear
2006/12/02 PHP
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
Python更新所有已安装包的操作
2020/02/13 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
优秀党员转正的自我评价
2013/10/06 职场文书
表彰先进集体通报
2014/01/12 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
单位租房协议书样本
2014/10/30 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
新员工辞职信范文
2015/05/12 职场文书
创业计划书之养殖业
2019/10/11 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书