该教程,我们将讨论CSS3的一些新功能和新特性,并教你在不使用图片和JavaScript的情况下,如何制作酷炫的圆形导航菜单。该实例将用到CSS3的新特性: border-radius和animation。
Demo演示 下载代码
第一步:编辑菜单的HTML代码
菜单包含三个列表项,分别取名为“Menu1”、“Menu2”、“Menu3”。
view plaincopy to clipboardprint?
第二步:设置菜单的背景
在该步骤中,我们将把导航的背景设置为黑色。宽度、高度和内边距为可选项,可以不设置。
view plaincopy to clipboardprint?
.css3Menus {
background: #14080a;
width:506px;
height:260px;
padding:20px;
}
如下图:
第三步:利用border-radius,制作圆形导航。
该步中,我们会利用CSS3的一些酷的功能,尤其是border-radius ,将每个列表项的背景设置为黄色,形状为圆形。
view plaincopy to clipboardprint?
ul {
list-style: none;
}
li {
float:left;
font: 14px/10px Arial, Verdana, sans-serif;
color:#FFF;
background-color:#CCCC00;
width: 80px;
height: 80px;
padding:20px;
margin:0 30px 0 0;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
}
菜单看起来呈下面样子:
第四步:设置菜单的对齐方式
本步骤中,我们将为每个列表项设置特定的背景颜色与位置:
view plaincopy to clipboardprint?
li#menu1 {
background-color: #00FFCC;
}
li#menu2 {
background-color: #CC9900;
margin-top:100px;
}
li#menu3 {
background-color: #33FF66;
margin-top:50px;
}
现在菜单看起来呈下面样子:
第五步:设置菜单中链接的对齐方式
view plaincopy to clipboardprint?
li a {
color:#FFF;
text-decoration:none;
display:block;
width: 80px;
height: 45px; text-align: center;
padding:35px 0 0 0;
margin:0 40px 0 0;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
li#menu1 a {
background-color: #FF0000;
}
li#menu2 a {
background-color: #660033;
}
li#menu3 a {
background-color: #66CCCC;
}
菜单现阶段的样子:
第六步:定义另一种效果,当鼠标悬浮在链接上时进行展现
view plaincopy to clipboardprint?
li a:hover,
li a:focus,
li a:active {
width: 120px;
height:65px;
padding:55px 0 0 0;
margin:-20px 0 0 -20px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
}
菜单样式如图:
第七步:最后为导航增加动画效果
view plaincopy to clipboardprint?
li a:hover,
li a:focus,
li a:active {
-webkit-animation-name:bounce;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count:4;
-webkit-animation-direction:alternate;
}
@-webkit-keyframes bounce{from{margin:0 40px 0 0;}
to{margin:120px 40px 0 0;}
}
菜单所产生的动画效果:
结论
通过上面教程,你已经学到如何制作酷的动画菜单。在制作过程中不需要使用JavaScript和图片,只需要使用CSS3的一些酷的特性即可。该菜单可以完美地运行于Chrome和Safari浏览器。在Firefox浏览器中,无法看到动画效果。
原文来自:Web Revisions
【不用图片和JS也可创建绚丽的动态CSS3菜单】相关文章
1. 不用图片和JS也可创建绚丽的动态CSS3菜单
2. 不用图片和JS,照样创建绚丽的动态CSS3菜单
3. CSS3菜单气泡提示
4. 拖拽即可创建HTML5网站的建站平台
5. 一款基于css3和jquery实现的动画弹出层
6. jQuery/CSS3实现超酷的动画Tab菜单
7. jQuery/CSS3实现超酷的动画Tab菜单
8. 使用CSS3创建动态3D立方体
9. CSS3实现简单的动画图片说明效果
10. jQuery 人脸识别插件,支持图片和视频
本文来源:https://www.51html5.com/a3321.html