|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称，中文译作“层叠样式表单”。
破洛洛文章简介：经由过程CSS3最新的过渡（transition）和动画（animation）两个功效完成鼠标悬停时的动画效果。我们用一样的元素做出了9种分歧的效果。
CSS3新增加了完成动画效果的新功效，经由过程本文，你能够对这些新功效有个开端懂得。本文将为人人带来一些充斥创意的菜单悬停效果。它由图标，主题目，副题目等复杂的元素组成，经由过程CSS3最新的过渡（transition）和动画（animation）两个功效完成鼠标悬停时的动画效果。我们用一样的元素做出了9种分歧的效果。
演示下载
示例中所用的图标实践上是一种收集标记字体，包括在@font-face。这类字体是有JustBeNice事情室所开辟。
标志
菜单的HTML架构是一个无序列表，个中的每一个选项都是由图标跨度和内容层构成的链接元素。内容层包括主题目和副题目：
由于我们利用标记字体作为图标，我们为图标写上字母。
CSS
一切示例中的共有的款式都包括标记字体：
文件的路径是相对CSS文件而言的，因而，它们应放在css目次下的websymbols中（css/websymbols/）。
用图标作为字体的优点在于，能够为它使用大度的效果，好比说，文本投影（textshadow）。还能够依据需求按比例缩小或减少。
每一个示例中的无序列表款式都不异。我们只是让它的宽度合适，便利其居于屏幕中心：
鄙人面的示例中，会向人人展现元素的款式是怎样为最后的效果服务的。
在第1个示例中，我们会研讨一切元素的款式，别的示例，我们偏重对代码举行改写。
注重：以下示例中，我不会写任何扫瞄器特定的前缀，可是你会在示例文件夹中看到一切需要前缀。
示例1
在示例1的堆叠菜单中，可完成各个元素的巨细，和各个菜单项的背景色彩的改动。
为列表项界说款式：
过渡效果合适一切属性，由于鼠标移上时，边框色彩和背景致城市产生响应的变更。
破洛洛文章简介：经由过程CSS3最新的过渡（transition）和动画（animation）两个功效完成鼠标悬停时的动画效果。我们用一样的元素做出了9种分歧的效果。
链接元素款式见下：
为单个元素界说款式。
图标位于右边，它的跨度款式见下：
如你所见，我们利用了收集标记做字体。每一个字母都是一个图标。
内容元素的封装见上面的款式：
在代码中修正内容元素的字体值，为transition增加linear属性完成匀速过渡效果：
如今，我们举行最风趣的部分，当鼠标悬停在列表元素上时，我们会看到字体巨细和色彩的变更：
因为我们为每个元素界说了过渡效果，切换时就会看到动画效果。
破洛洛文章简介：经由过程CSS3最新的过渡（transition）和动画（animation）两个功效完成鼠标悬停时的动画效果。我们用一样的元素做出了9种分歧的效果。
示例2
在示例2中，我们让内容元素分离从上和下两个偏向完成的动画效果。
起首界说两种动画效果。第一种将各个元素沿着Y轴下移200%（即translateY的值为200%）。别的，它的不通明度设为0（即opacity的值设为0）。鼠标移开时，即回到原始效果，鄙人面代码所示的”to“前面将translateY的值设为0%便可。
第二种动画效果完成元素从上到下滑进，遵守一样的划定规矩，只是响应的数要举行修正：
示例3
在示例3中，当鼠标悬停时，会看到背景和文本色彩产生改动，并同时伴随图标扭转和缩小效果。经由过程改动transform属性和修正图标的字体巨细的值，便可完成以上效果：
破洛洛文章简介：经由过程CSS3最新的过渡（transition）和动画（animation）两个功效完成鼠标悬停时的动画效果。我们用一样的元素做出了9种分歧的效果。
示例4
示例4到示例8都接纳了分歧结构的菜单。各个菜单项相邻分列，呈浮动状。
图标的地位在菜单项的中上地位：
内容封装放在菜单项较底部地位：
主题目和副题目的款式设置见下：
鼠标悬停时，我们完成图标含混，并从上向下滑进，同时背景色彩改动，文本内容从上、下分离滑进的效果。
把图标的色彩设为通明（transparent），并依照下图为文本投影（text-shadow）属性赋值（发生含混），如许图标的含混效果也就发生了。此处的动画效果与后面几个示例不异，只不外完成从上到下的动画效果的translate值分歧而已。这里的translateY的值设为-300%。
破洛洛文章简介：经由过程CSS3最新的过渡（transition）和动画（animation）两个功效完成鼠标悬停时的动画效果。我们用一样的元素做出了9种分歧的效果。
示例5
在本示例中，我们可完成：图标自左向右，第一排笔墨自右向左，第二排笔墨自下向上同时滑动呈现。
从下往上（moveFromBottom）的动画效果后面已提过。接上去看看从左向右（moveFromLeft）的动画效果，经由过程将translateX的值设为-100%，完成各个元素从左向右的挪动效果；translateX的值设为0%则暗示，当鼠标分开时，就回到原始效果。
将translateX的值设为100%便可完成从右向左（moveFromRight）的动画效果。
示例6
本示例完成的效果：主题目从左滑进，同时伴随扭转效果：
该效果（moveFromLeftRotate）的完成代码：
破洛洛文章简介：经由过程CSS3最新的过渡（transition）和动画（animation）两个功效完成鼠标悬停时的动画效果。我们用一样的元素做出了9种分歧的效果。
示例7
在本示例中，我们将副题目安排在最底部。
我们但愿副题目从下往上滑进，同时改动背景致的动画效果。
图标从下往上滑进，同时，主题目则由小变年夜。
由小变年夜（smallToBig）的动画效果展现了怎样利用CSS3的变更处置（transform）中的scale属性。
示例8
本示例要完成鼠标悬停时，列表项一切内容都缩小的效果。
菜单中的心形图标另有一个特别的切换效果。当鼠标悬停时，经由过程使用由小变年夜和不休轮回瓜代的特别体例来完成心爱的心跳动画效果。
破洛洛文章简介：经由过程CSS3最新的过渡（transition）和动画（animation）两个功效完成鼠标悬停时的动画效果。我们用一样的元素做出了9种分歧的效果。
示例9
示例9和示例10都是环形的菜单布局，以是我们会对列表中的元素改换款式。
为了创立环形，我们要把圆角的值改成元素的外宽度/高度的一半。将一切元素全体放在列表项中，并居中。上面我们完成鼠标悬停时的效果。
本例所完成的效果：菜单项扭转360 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:09:58
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜