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

  • A+
所属分类:DIV+CSS

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

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

Demo演示  下载代码

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

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

12345678view plaincopy to clipboardprint?<div class=“css3Menus”> <ul    <li>Menu1</li    <li>Menu2</li    <li>Menu3</li</ul</div>

第二步:设置菜单的背景

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

1234567view plaincopy to clipboardprint?.css3Menus { background#14080awidth:506pxheight:260pxpadding:20px}

如下图:

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

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

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

123456789101112131415161718view plaincopy to clipboardprint?ul { list-stylenone   li { float:leftfont14px/10px ArialVerdanasans-serifcolor:#FFFbackground-color:#CCCC00width80pxheight80pxpadding:20pxmargin:0 30px 0 0-webkit-border-radius: 60px-moz-border-radius: 60pxborder-radius: 60px}

菜单看起来呈下面样子:

不用图片和JS,照样创建绚丽的动态CSS3菜单
123下一页

  • 我的微信小程序
  • 长按二维码识别查看微信小程序
  • weinxin
  • 我的个人微信号
  • 长按识别加我个人微信号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: