首页 > 网页教程 > CSS > CSS3教程:创意独特漂亮的CSS动画导航菜单设计

CSS3教程:创意独特漂亮的CSS动画导航菜单设计

时间:2012-04-13    来源:站长之家

CSS3新增添了实现动画效果的新功能,通过本文,你可以对这些新功能有个初步了解。本文将为大家带来一些充满创意的菜单悬停效果。它由图标,主标题,副标题等简单的元素构成,通过CSS3最新的过渡(transition)和动画(animation)两个功能实现鼠标悬停时的动画效果。我们用同样的元素做出了9种不同的效果。

演示 下载

示例中所用的图标实际上是一种网络符号字体,包含在@font-face。这种字体是有Just Be Nice工作室所开发。

标记

菜单的HTML架构是一个无序列表,其中的每个选项都是由图标跨度和内容层组成的链接元素。内容层包含主标题和副标题:

因为我们使用符号字体作为图标,我们为图标写上字母。

CSS

所有示例中的共有的样式都包含符号字体:

文件的路径是相对于CSS文件而言的,因此,它们应放在css目录下的websymbols中(css/websymbols/)。

用图标作为字体的好处在于,可以为它运用漂亮的效果,比如说,文本投影(text shadow)。还可以根据需求按比例放大或缩小。

每个示例中的无序列表样式都相同。我们只是让它的宽度适合,方便其居于屏幕中央:

在下面的示例中,会向大家展示元素的样式是如何为最终效果服务的。

在第1个示例中,我们会研究所有元素的样式,其它示例,我们侧重对代码进行改写。

注意:以下示例中,我不会写任何浏览器特定的前缀,但是你会在示例文件夹中看到所有必要前缀。

示例1

在示例1的堆叠菜单中,可实现各个元素的大小,以及各个菜单项的背景颜色的改变。

为列表项定义样式:

过渡效果适合所有属性,因为鼠标移上时,边框颜色和背景色都会发生相应的变化。

相关推荐
6个设计精致使用CSS3技术美化的表单教程
20个基于CSS3制作的3D按钮教程分享(附DEMO演示)
25个超酷的CSS3动画按钮和菜单教程分享
CSS3新手入门教程:快乐的CSS3之旅!
8个CSS3前端开发必备的实用在线帮助手册
制作CSS3圆角效果的代码片段及图片演示
CSS3实现透明边框的方法分享
CSS3的Multi-columns多列布局之列数和列宽详解
CSS3的Multi-columns多列布局column-gap column-rule详解
CSS3的Multi-columns多列布局之跨列详解
30款网站CSS导航菜单设计教程分享
网站策划:CSS网页动画运用的十二大原则
初识CSS3的强大功能
如何用CSS3 border-radius来实现圆角DIV?
CSS1-CSS3选择器汇总表
微软的IE9将要支持CSS3和HTML5?
CSS3亮点前瞻之线性渐变实例详解
不同浏览器在CSS3和HTML5下的兼容速查表
CSS3属性box-shadow(图层阴影)的使用教程
CSS3盒子模型(Flexible Box Module)之位置排序应用详解
CSS3盒子模型(Flexible Box Module)之尺寸应用详解
让IE6/IE7/IE8支持CSS3属性的脚本
Smashing Magazine CSS3设计赛获奖作品赏析
前端设计必备的CSS3开发实用工具集
看这些用CSS3绘制的图标,你震撼了吗
利用CSS3技术嵌入Web字体格式及浏览器兼容性介绍
24款超级实用的免费CSS3在线工具宝典
HTML5和CSS3开发的功能检测类库 — Modernizr
CSS3教程:17种用CSS实现的很酷炫的立体网页按钮和字体效果
5款立体质感的CSS3导航菜单(附英文教程和下载)
用CSS3圆角、盒子阴影、文字阴影效果和RGBa创建超酷的按钮
关注一些鲜为人知、试验性的CSS属性
36款超级实用的CSS3在线生成器和工具推荐
7个基于CSS3的工具提示(tooltip)教程推荐

精彩推荐

热门教程