阅读更多

8顶
6踩

Web前端

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


 

Demo演示  下载代码

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

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

<div class=“css3Menus”>  
<ul>  
    <li>Menu1</li>  
    <li>Menu2</li>  
    <li>Menu3</li>  
</ul>  
</div> 

第二步:设置菜单的背景

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

.css3Menus {  
background: #14080a;  
width:506px;  
height:260px;  
padding:20px;  
}  

如下图:


 

第三步:利用border-radius,制作圆形导航。

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

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

菜单看起来呈下面样子:


 

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

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

li#menu1 {  
background-color: #00FFCC;  
}  
li#menu2 {  
background-color: #CC9900;  
margin-top:100px;  
}  
li#menu3 {  
background-color: #33FF66;  
margin-top:50px;  
}  

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


 

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

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

菜单现阶段的样子:


 

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

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

菜单样式如图:


 

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

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

  • 大小: 19.2 KB
  • 大小: 7.4 KB
  • 大小: 15.9 KB
  • 大小: 16.4 KB
  • 大小: 22.1 KB
  • 大小: 23.3 KB
  • 大小: 20.5 KB
来自: CSDN
8
6
评论 共 7 条 请登录后发表评论
7 楼 nakupanda 2013-07-24 11:55
alvin198761 写道
yunzhu 写道
kingxip 写道
You say a jb without even Firefox supporting.


这个说外语的人素质挺低的,已经是美国猪养的畜生了


真是一黑一个准! 赶紧把英国澳洲加拿大都黑一遍吧
6 楼 alvin198761 2013-07-23 18:27
yunzhu 写道
kingxip 写道
You say a jb without even Firefox supporting.


这个说外语的人素质挺低的,已经是美国猪养的畜生了
5 楼 求求你帮帮我 2013-07-23 16:04
kingxip 写道
You say a jb without even Firefox supporting.

离开火狐的支持,博主说的就是个...鸡....巴。

博主写的这么幸苦,就是没说清楚而已。

鄙视用英语评论的..J...B.
4 楼 学海无涯穷欢乐 2013-07-21 20:34
辛辛苦苦写的文章被踩  作者很心痛吧
3 楼 ad6543210 2013-07-19 14:54
誰說 只有 Webkit 支援?
IE10/Firefox 都能用啊
是作者自己亂加屬性前輟
拿掉就能用了
border-radius
animation-***
@keyframes
2 楼 yunzhu 2013-07-19 11:23
kingxip 写道
You say a jb without even Firefox supporting.

1 楼 kingxip 2013-07-19 11:00
You say a jb without even Firefox supporting.

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 不用图片和JS,照样创建绚丽的动态CSS3菜单---转载

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

  • CSS_渐变过渡_动画

    背景产生的====由浏览器进行加载显示的====比较均匀,兼容性比较强的,使用背景图片平铺的话,有可能会失真 1)线性渐变(实际开发应用频率会比较高) background:linear-gradient(to,方向词,col1,col2,col...

  • 2. css

    CSS 一: 初识 1. css 介绍 CSS:Cascading Style Sheet 层叠样式表 是一组样式设置的规则,用于控制页面的外观样式 作用 实现内容与样式的分离,便于团队开发 样式复用,便于网站的后期维护 页面的精确控制,让...

  • CSS3 之 less、sass、stylus区别

    CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风格设计的。通过设立样式表,可以统一地...

  • indesign选中不了图片删除_图片神器XnView教程、方法和技巧汇总

    编者按关于XnView的介绍和概况参阅《「神级图片软件 XnView 解析」XnView MP 和 XnView 哪个好》。在写完上面这篇文章之后,想整理一些方法和技巧给不太熟悉XnView的朋友参考,发现许多网页都在消失,图片也打不开了...

  • 详说css与预处理器(以及less、sass、stylus的区别)

    CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风格设计的。通过设立样式表,可以统一...

  • CSS3变换入门

    http://www.qianduan.net/css-transitions-101.html译自:CSS transitions 101 中文:CSS3变换入门 原作者:Jason Cranford Teague 译者:神飞 请尊重版权,转载请注明出处,多谢!...

  • 正确加载 Javascript 和 CSS 到 WordPress

    易多云免备案虚拟主机,新用户免费试用15天,一键安装Wordpress,点此查看详情! 本文目录 ... jQuery 库和主题自定义的脚本、... print.css 到你的WordPress主题 4使用 wp_enqueue_scripts 替换 init 5使用

  • CSS与JavaScript技巧

    一、CSS HACK 以下两种方法几乎能解决现今所有HACK.翻阅很多资料,已测试可以使用。 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) ...

  • CSS transitions#CSS3变换入门

    尽管人们期望在屏幕上有些改变,但是CSS和HTML对页面中的交互能做的实在太少了,而那些还需要用代码来实现。 比如一个链接要么是这个颜色,要么是那个颜色;一个文本区域要么这么大,要么那么大;一张图片要么是...

  • dw新建站再怎么建立css,新手怎样开始div+css建站之路

    1.坚持用记事本写我真正的接触div+css也不过一年,所以也是个初学者,开始也一样在DW里面拖拖拽拽,做东西的时候全部在设计视图下从来不看也不管页面代码什么样的,我们老师也是那样教的,那时候对网页的概念就是...

  • div + css 详解

    《Div+CSS 布局大全》 整理者:Jesse Zhao 网站:http://JesseZhao.cnblogs.com 送给我最爱的女朋友蜜蜜,希望她可以永远快乐幸福!!! 《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 ...

  • DIV+CSS布局大全

    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine

  • Div+CSS 布局大全

    《Div+CSS 布局大全》    整理者:Jesse Zhao 网站:http://JesseZhao.cnblogs.com           第 1 页 《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http ...

  • Css预处理-sass、less和stylus的安装使用和入门实践

    能。 注:LESS的官网:http://lesscss.org 3.Stylus背景介绍 Stylus,2010年产生,来自于...Stylus被称为是一种革命性的新语言,提供一个高效、动态、和使用表达方式来生成CSS,以供浏览器使用。Stylus同时支持缩

  • javascript 框架、根基技巧、布局、CSS、控件 JavaScript 类库

    预筹备之 JavaScript ...海内的一些框架许多也是模仿 jQuery 对 JavaScript 停止了包装,不外这些框架的开山祖师 YUI 照样坚持用自己的 JavaScript 类库。 jQuery 是今朝用的最多的前端 JavaScript 类库,据初步统...

  • 关于组织参加“第八届‘泰迪杯’数据挖掘挑战赛”的通知-4页

    关于组织参加“第八届‘泰迪杯’数据挖掘挑战赛”的通知-4页

  • PyMySQL-1.1.0rc1.tar.gz

    PyMySQL-1.1.0rc1.tar.gz

  • 技术资料分享CC2530中文数据手册完全版非常好的技术资料.zip

    技术资料分享CC2530中文数据手册完全版非常好的技术资料.zip

Global site tag (gtag.js) - Google Analytics