用CSS3打造独具创意的动画菜单效果

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

演示 下载

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

标记

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

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

CSS

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

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

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

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

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

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

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

示例1

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

为列表项定义样式：

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

链接元素样式见下：

为单个元素定义样式。

图标位于左边，它的跨度样式见下：

如你所见，我们使用了网络符号做字体。每个字母都是一个图标。

内容元素的封装见下面的样式：

在代码中修改内容元素的字体值，为transition添加linear属性实现匀速过渡效果：

现在，我们进行最有趣的部分，当鼠标悬停在列表元素上时，我们会看到字体大小和颜色的变化：

由于我们为每一个元素定义了过渡效果，切换时就会看到动画效果。

示例2

在示例2中，我们让内容元素分别从上和下两个方向实现的动画效果。

首先定义两种动画效果。第一种将各个元素沿着Y轴下移200%（即translateY的值为200%）。另外，它的不透明度设为0（即opacity 的值设为0）。鼠标移开时，即回到原始效果，在下面代码所示的”to“后面将 translateY的值设为0%即可。

第二种动画效果实现元素从上到下滑入，遵循同样的规则，只是相应的数要进行修改：

示例3

在示例3中，当鼠标悬停时，会看到背景和文本颜色发生改变，并同时伴有图标旋转和放大效果。通过改变transform属性和修改图标的字体大小的值，即可实现以上效果：

示例4

示例4到示例8都采用了不同布局的菜单。各个菜单项相邻排列，呈浮动状。

图标的位置在菜单项的中上位置：

内容封装放在菜单项较底部位置：

主标题和副标题的样式设置见下：

鼠标悬停时，我们实现图标模糊，并从上向下滑入，同时背景颜色改变，文本内容从上、下分别滑入的效果。

把图标的颜色设为透明（transparent），并按照下图为文本投影（text-shadow）属性赋值（产生模糊），这样图标的模糊效果也就产生了。此处的动画效果与前面几个示例相同，只不过实现从上到下的动画效果的translate值不同罢了。这里的 translateY的值设为-300%。

示例5

在本示例中，我们可实现：图标自左向右，第一排文字自右向左，第二排文字自下向上同时滑动出现。

从下往上（moveFromBottom）的动画效果前面已经提过。接下来看看从左向右（moveFromLeft）的动画效果，通过将translateX的值设为-100%，实现各个元素从左向右的移动效果；translateX的值设为0%则表示，当鼠标离开时，就回到原始效果。

将translateX的值设为100%即可实现从右向左（moveFromRight ）的动画效果。

示例6

本示例实现的效果：主标题从左滑入，同时伴有旋转效果：

该效果（moveFromLeftRotate）的实现代码：

示例7

在本示例中，我们将副标题放置在最底部。

我们希望副标题从下往上滑入，同时改变背景色的动画效果。

图标从下往上滑入，同时，主标题则由小变大。

由小变大（ smallToBig ）的动画效果展示了如何使用CSS3的变换处理（transform）中的scale属性。

示例8

本示例要实现鼠标悬停时，列表项所有内容都放大的效果。

菜单中的心形图标还有一个特殊的切换效果。当鼠标悬停时，通过运用由小变大和不断循环交替的特殊方式来实现可爱的心跳动画效果。

示例9

示例9和示例10都是环形的菜单结构，所以我们会对列表中的元素更换样式。

为了创建环形，我们要把圆角的值改为元素的外宽度/高度的一半。 将所有元素全部放在列表项中，并居中。下面我们实现鼠标悬停时的效果。

本例所实现的效果：菜单项旋转360°，主标题消失，副标题出现（不透明度开始的值为0）。

示例10

最后一个例子中，每个菜单项的左外边距都是48像素，且相互重叠。当鼠标移上去时，环形菜单项整体变大，菜单的堆叠顺序也上移（z-index是决定元素的堆叠顺序）。最终就呈现出菜单项上浮的效果。

我希望大家能从这些小实验上找到灵感和创意。

请注意，所有这些动画和过渡效果都只能在诸如Google Chrome，苹果的Safari，Mozilla Firefox等现代浏览器中生效。

网站栏目：用CSS3打造独具创意的动画菜单效果
网站路径：https://www.cdcxhl.com/news/214402.html

成都网站建设公司_创新互联，为您提供响应式网站、静态网站、企业建站、外贸建站、软件开发、面包屑导航

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联