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

演示下载

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

标记

菜单的HTML架构是一个无序列表，其中的每个选项都是由图标跨度和内容层组成的链接元素。内容层包含主标题和副标题：
  1. <ul class="ca-menu">
  2. <li>
  3. <a href="#">
  4. <span class="ca-icon">A</span>
  5. <div class="ca-content">
  6. <h2 class="ca-main">Exceptional Service</h2>
  7. <h3 class="ca-sub">Personalized to your needs</h3>
  8. </div>
  9. </a>
  10. </li>
  11. ...
  12. </ul>

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

CSS

所有示例中的共有的样式都包含符号字体：
  1. @font-face {
  2. font-family: 'WebSymbolsRegular';
  3. src: url('websymbols/websymbols-regular-webfont.eot');
  4. src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
  5. url('websymbols/websymbols-regular-webfont.woff') format('woff'),
  6. url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
  7. url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
  8. font-weight: normal;
  9. font-style: normal;
  10. }

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

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

每个示例中的无序列表样式都相同。我们只是让它的宽度适合，方便其居于屏幕中央：
  1. .ca-menu{
  2. padding: 0;
  3. margin: 20px auto;
  4. width: 500px;
  5. }

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

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

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

CSS3打造的10种创意动画菜单效果-1

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

为列表项定义样式：
  1. .ca-menu li{
  2. width: 500px;
  3. height: 100px;
  4. overflow: hidden;
  5. display: block;
  6. background: #fff;
  7. -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  8. -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  9. box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  10. margin-bottom: 4px;
  11. border-left: 10px solid #000;
  12. -webkit-transition: all 300ms ease-in-out;
  13. -moz-transition: all 300ms ease-in-out;
  14. -o-transition: all 300ms ease-in-out;
  15. -ms-transition: all 300ms ease-in-out;
  16. transition: all 300ms ease-in-out;
  17. }

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

链接元素样式见下：
  1. .ca-menu li a{
  2. text-align: left;
  3. display: block;
  4. width: 100%;
  5. height: 100%;
  6. color: #333;
  7. position:relative;
  8. }

为单个元素定义样式。

图标位于左边，它的跨度样式见下：
  1. .ca-icon{
  2. font-family: 'WebSymbolsRegular', cursive;
  3. font-size: 20px;
  4. text-shadow: 0px 0px 1px #333;
  5. line-height: 90px;
  6. position: absolute;
  7. width: 90px;
  8. left: 20px;
  9. text-align: center;
  10. -webkit-transition: all 300ms linear;
  11. -moz-transition: all 300ms linear;
  12. -o-transition: all 300ms linear;
  13. -ms-transition: all 300ms linear;
  14. transition: all 300ms linear;
  15. }

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

内容元素的封装见下面的样式：
  1. .ca-content{
  2. position: absolute;
  3. left: 120px;
  4. width: 370px;
  5. height: 60px;
  6. top: 20px;
  7. }

在代码中修改内容元素的字体值，为transition添加linear属性实现匀速过渡效果：
  1. .ca-main{
  2. font-size: 30px;
  3. -webkit-transition: all 300ms linear;
  4. -moz-transition: all 300ms linear;
  5. -o-transition: all 300ms linear;
  6. -ms-transition: all 300ms linear;
  7. transition: all 300ms linear;
  8. }
  9. .ca-sub{
  10. font-size: 14px;
  11. color: #666;
  12. -webkit-transition: all 300ms linear;
  13. -moz-transition: all 300ms linear;
  14. -o-transition: all 300ms linear;
  15. -ms-transition: all 300ms linear;
  16. transition: all 300ms linear;
  17. }

现在，我们进行最有趣的部分，当鼠标悬停在列表元素上时，我们会看到字体大小和颜色的变化：
  1. .ca-menu li:hover{
  2. border-color: #fff004;
  3. background: #000;
  4. }
  5. .ca-menu li:hover .ca-icon{
  6. color: #fff004;
  7. text-shadow: 0px 0px 1px #fff004;
  8. font-size: 50px;
  9. }
  10. .ca-menu li:hover .ca-main{
  11. color: #fff004;
  12. font-size: 14px;
  13. }
  14. .ca-menu li:hover .ca-sub{
  15. color: #fff;
  16. font-size: 30px;
  17. }

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

CSS3打造的10种创意动画菜单效果-2

在示例2中，我们让内容元素分别从上和下两个方向实现的动画效果。
  1. .ca-menu li:hover{
  2. background: #e1f0fa;
  3. }
  4. .ca-menu li:hover .ca-icon{
  5. font-size: 40px;
  6. color: #259add;
  7. opacity: 0.8;
  8. text-shadow: 0px 0px 13px #fff;
  9. }
  10. .ca-menu li:hover .ca-main{
  11. opacity: 1;
  12. color:#2676ac;
  13. -webkit-animation: moveFromTop 300ms ease-in-out;
  14. -moz-animation: moveFromTop 300ms ease-in-out;
  15. -ms-animation: moveFromTop 300ms ease-in-out;
  16. }
  17. .ca-menu li:hover .ca-sub{
  18. opacity: 1;
  19. -webkit-animation: moveFromBottom 300ms ease-in-out;
  20. -moz-animation: moveFromBottom 300ms ease-in-out;
  21. -ms-animation: moveFromBottom 300ms ease-in-out;
  22. }

首先定义两种动画效果。第一种将各个元素沿着Y轴下移200%（即translateY的值为200%）。另外，它的不透明度设为0（即opacity 的值设为0）。鼠标移开时，即回到原始效果，在下面代码所示的”to“后面将 translateY的值设为0%即可。
  1. @-webkit-keyframes moveFromBottom {
  2. from {
  3. opacity: 0;
  4. -webkit-transform: translateY(200%);
  5. }
  6. to {
  7. opacity: 1;
  8. -webkit-transform: translateY(0%);
  9. }
  10. }

第二种动画效果实现元素从上到下滑入，遵循同样的规则，只是相应的数要进行修改：
  1. @-webkit-keyframes moveFromTop {
  2. from {
  3. opacity: 0;
  4. -webkit-transform: translateY(-200%);
  5. }
  6. to {
  7. opacity: 1;
  8. -webkit-transform: translateY(0%);
  9. }
  10. }

CSS3打造的10种创意动画菜单效果-3

CSS3打造创意动画菜单效果

在示例3中，当鼠标悬停时，会看到背景和文本颜色发生改变，并同时伴有图标旋转和放大效果。通过改变transform属性和修改图标的字体大小的值，即可实现以上效果：
  1. .ca-menu li:hover{
  2. background-color: #000;
  3. }
  4. .ca-menu li:hover .ca-icon{
  5. color: #f900b0;
  6. font-size: 120px;
  7. opacity: 0.2;
  8. left: -20px;
  9. -webkit-transform: rotate(20deg);
  10. -moz-transform: rotate(20deg);
  11. -ms-transform: rotate(20deg);
  12. transform: rotate(20deg);
  13. }
  14. .ca-menu li:hover .ca-main{
  15. color: #f900b0;
  16. opacity: 0.8;
  17. }
  18. .ca-menu li:hover .ca-sub{
  19. color: #fff;
  20. opacity: 0.8;
  21. }

CSS3打造的10种创意动画菜单效果-4

CSS3打造创意动画菜单效果

示例4到示例8都采用了不同布局的菜单。各个菜单项相邻排列，呈浮动状。
  1. .ca-menu li{
  2. width: 200px;
  3. height: 300px;
  4. overflow: hidden;
  5. position: relative;
  6. float: left;
  7. border: 5px solid #fff;
  8. background: #e2f0ff;
  9. -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  10. -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  11. box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  12. margin-right: 4px;
  13. -webkit-transition: all 300ms linear;
  14. -moz-transition: all 300ms linear;
  15. -o-transition: all 300ms linear;
  16. -ms-transition: all 300ms linear;
  17. transition: all 300ms linear;
  18. }
  19. .ca-menu li:last-child{
  20. margin-right: 0px;
  21. }

图标的位置在菜单项的中上位置：
  1. .ca-icon{
  2. font-family: 'WebSymbolsRegular', cursive;
  3. color: #c5e4f4;
  4. font-size: 90px;
  5. text-shadow: 1px 0px 1px rgba(255,255,255,0.7);
  6. line-height: 150px;
  7. position: absolute;
  8. width: 100%;
  9. height: 50%;
  10. left: 0px;
  11. top: 0px;
  12. text-align: center;
  13. -webkit-transition: all 200ms linear;
  14. -moz-transition: all 200ms linear;
  15. -o-transition: all 200ms linear;
  16. -ms-transition: all 200ms linear;
  17. transition: all 200ms linear;
  18. }

内容封装放在菜单项较底部位置：
  1. .ca-content{
  2. position: absolute;
  3. left: 0px;
  4. width: 100%;
  5. height: 50%;
  6. top: 50%;
  7. }

主标题和副标题的样式设置见下：
  1. .ca-main{
  2. font-size: 30px;
  3. color: #005382;
  4. opacity: 0.8;
  5. text-align: center;
  6. -webkit-transition: all 200ms linear;
  7. -moz-transition: all 200ms linear;
  8. -o-transition: all 200ms linear;
  9. -ms-transition: all 200ms linear;
  10. transition: all 200ms linear;
  11. }
  12. .ca-sub{
  13. text-align:center;
  14. font-size: 14px;
  15. color: #666;
  16. line-height: 40px;
  17. opacity: 0.8;
  18. -webkit-transition: all 200ms linear;
  19. -moz-transition: all 200ms linear;
  20. -o-transition: all 200ms linear;
  21. -ms-transition: all 200ms linear;
  22. transition: all 200ms linear;
  23. }

鼠标悬停时，我们实现图标模糊，并从上向下滑入，同时背景颜色改变，文本内容从上、下分别滑入的效果。
  1. .ca-menu li:hover{
  2. background-color: #fff;
  3. }
  4. .ca-menu li:hover .ca-icon{
  5. text-shadow: 0px 0px 20px #c5e4f4;
  6. color: transparent;
  7. -webkit-animation: moveFromTop 400ms ease;
  8. -moz-animation: moveFromTop 400ms ease;
  9. -ms-animation: moveFromTop 400ms ease;
  10. }
  11. .ca-menu li:hover .ca-main{
  12. color: #000;
  13. -webkit-animation: moveFromTop 300ms ease;
  14. -moz-animation: moveFromTop 300ms ease;
  15. -ms-animation: moveFromTop 300ms ease;
  16. }
  17. .ca-menu li:hover .ca-sub{
  18. color: #000;
  19. -webkit-animation: moveFromBottom 500ms ease;
  20. -moz-animation: moveFromBottom 500ms ease;
  21. -ms-animation: moveFromBottom 500ms ease;
  22. }

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

CSS3打造的10种创意动画菜单效果-5

在本示例中，我们可实现：图标自左向右，第一排文字自右向左，第二排文字自下向上同时滑动出现。
  1. .ca-menu li:hover{
  2. background:#fff;
  3. }
  4. .ca-menu li:hover .ca-icon{
  5. color: #afa379;
  6. font-size: 90px;
  7. opacity: 0.1;
  8. -webkit-animation: moveFromLeft 400ms ease;
  9. -moz-animation: moveFromLeft 400ms ease;
  10. -ms-animation: moveFromLeft 400ms ease;
  11. }
  12. .ca-menu li:hover .ca-main{
  13. color: #afa379;
  14. -webkit-animation: moveFromRight 300ms ease;
  15. -moz-animation: moveFromRight 300ms ease;
  16. -ms-animation: moveFromRight 300ms ease;
  17. }
  18. .ca-menu li:hover .ca-sub{
  19. color: #000;
  20. -webkit-animation: moveFromBottom 500ms ease;
  21. -moz-animation: moveFromBottom 500ms ease;
  22. -ms-animation: moveFromBottom 500ms ease;
  23. }

从下往上（moveFromBottom）的动画效果前面已经提过。接下来看看从左向右（moveFromLeft）的动画效果，通过将translateX的值设为-100%，实现各个元素从左向右的移动效果；translateX的值设为0%则表示，当鼠标离开时，就回到原始效果。
  1. @-webkit-keyframes moveFromLeft{
  2. from {
  3. -webkit-transform: translateX(-100%);
  4. }
  5. to {
  6. -webkit-transform: translateX(0%);
  7. }
  8. }

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

CSS3打造的10种创意动画菜单效果-6

本示例实现的效果：主标题从左滑入，同时伴有旋转效果：
  1. .ca-menu li:hover{
  2. background-color: #000;
  3. }
  4. .ca-menu li:hover .ca-icon{
  5. color: #fff;
  6. font-size: 90px;
  7. }
  8. .ca-menu li:hover .ca-main{
  9. color: #00ccff;
  10. -webkit-animation: moveFromLeftRotate 300ms ease;
  11. -moz-animation: moveFromLeftRotate 300ms ease;
  12. -ms-animation: moveFromLeftRotate 300ms ease;
  13. }
  14. .ca-menu li:hover .ca-sub{
  15. color: #fff;
  16. -webkit-animation: moveFromBottom 500ms ease;
  17. -moz-animation: moveFromBottom 500ms ease;
  18. -ms-animation: moveFromBottom 500ms ease;
  19. }

该效果（moveFromLeftRotate）的实现代码：
  1. @-webkit-keyframes moveFromLeftRotate{
  2. from {
  3. -webkit-transform: translateX(-100%) rotate(-90deg);
  4. }
  5. to {
  6. -webkit-transform: translateX(0%) rotate(0deg);
  7. }
  8. }

CSS3打造的10种创意动画菜单效果-7

在本示例中，我们将副标题放置在最底部。
  1. .ca-sub{
  2. text-align:center;
  3. font-size: 14px;
  4. color: #666;
  5. line-height: 40px;
  6. opacity: 0.8;
  7. position: absolute;
  8. bottom: 0;
  9. width: 100%;
  10. -webkit-transition: all 200ms linear;
  11. -moz-transition: all 200ms linear;
  12. -o-transition: all 200ms linear;
  13. -ms-transition: all 200ms linear;
  14. transition: all 200ms linear;
  15. }

我们希望副标题从下往上滑入，同时改变背景色的动画效果。
  1. .ca-menu li:hover{
  2. background-color: #000;
  3. }
  4. .ca-menu li:hover .ca-icon{
  5. color: #ff2020;
  6. -webkit-animation: moveFromBottom 300ms ease;
  7. -moz-animation: moveFromBottom 300ms ease;
  8. -ms-animation: moveFromBottom 300ms ease;
  9. }
  10. .ca-menu li:hover .ca-main{
  11. color: #ff2020;
  12. -webkit-animation: smallToBig 300ms ease;
  13. -moz-animation: smallToBig 300ms ease;
  14. -ms-animation: smallToBig 300ms ease;
  15. }
  16. .ca-menu li:hover .ca-sub{
  17. color: #000;
  18. background-color: #ff2020;
  19. -webkit-animation: moveFromBottom 500ms ease;
  20. -moz-animation: moveFromBottom 500ms ease;
  21. -ms-animation: moveFromBottom 500ms ease;
  22. }

图标从下往上滑入，同时，主标题则由小变大。
  1. @-webkit-keyframes smallToBig{
  2. from {
  3. -webkit-transform: scale(0.1);
  4. }
  5. to {
  6. -webkit-transform: scale(1);
  7. }
  8. }

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

CSS3打造的10种创意动画菜单效果-8

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

菜单中的心形图标还有一个特殊的切换效果。当鼠标悬停时，通过运用由小变大和不断循环交替的特殊方式来实现可爱的心跳动画效果。
  1. .ca-menu li:hover{
  2. background-color: #000;
  3. z-index:999;
  4. -webkit-transform: scale(1.1);
  5. -moz-transform: scale(1.1);
  6. -ms-transform: scale(1.1);
  7. -o-transform: scale(1.1);
  8. transform: scale(1.1);
  9. }
  10. .ca-menu li:hover .ca-icon{
  11. color: #ccff00;
  12. font-size: 90px;
  13. opacity:0.3;
  14. }
  15. .ca-menu li:hover .ca-icon#heart{
  16. -webkit-animation: smallToBig 900ms alternate infinite ease;
  17. -moz-animation: smallToBig 900ms alternate infinite ease;
  18. -ms-animation: smallToBig 900ms alternate infinite ease;
  19. }
  20. .ca-menu li:hover .ca-main{
  21. color: #ccff00;
  22. -webkit-animation: smallToBig 300ms ease;
  23. -moz-animation: smallToBig 300ms ease;
  24. -ms-animation: smallToBig 300ms ease;
  25. }
  26. .ca-menu li:hover .ca-sub{
  27. color: #ccff00;
  28. -webkit-animation: moveFromBottom 500ms ease;
  29. -moz-animation: moveFromBottom 500ms ease;
  30. -ms-animation: moveFromBottom 500ms ease;
  31. }

CSS3打造的10种创意动画菜单效果-9

示例9和示例10都是环形的菜单结构，所以我们会对列表中的元素更换样式。
  1. .ca-menu li{
  2. width: 230px;
  3. height: 230px;
  4. border: 10px solid #f6f6f6;
  5. overflow: hidden;
  6. position: relative;
  7. float:left;
  8. background: #fff;
  9. margin-right: 4px;
  10. -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  11. -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  12. box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  13. -webkit-border-radius: 125px;
  14. -moz-border-radius: 125px;
  15. border-radius: 125px;
  16. -webkit-transition: all 400ms linear;
  17. -moz-transition: all 400ms linear;
  18. -o-transition: all 400ms linear;
  19. -ms-transition: all 400ms linear;
  20. transition: all 400ms linear;
  21. }

为了创建环形，我们要把圆角的值改为元素的外宽度/高度的一半。 将所有元素全部放在列表项中，并居中。下面我们实现鼠标悬停时的效果。
  1. .ca-menu li:hover{
  2. background: #f7f7f7;
  3. border-color: #fff;
  4. -webkit-transform: rotate(360deg);
  5. -moz-transform: rotate(360deg);
  6. -o-transform: rotate(360deg);
  7. -ms-transform: rotate(360deg);
  8. transform: rotate(360deg);
  9. }
  10. .ca-menu li:hover .ca-icon{
  11. color: #555;
  12. font-size: 60px;
  13. }
  14. .ca-menu li:hover .ca-main{
  15. display: none;
  16. }
  17. .ca-menu li:hover .ca-sub{
  18. opacity: 0.8;
  19. }

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

CSS3打造的10种创意动画菜单效果-10

最后一个例子中，每个菜单项的左外边距都是48像素，且相互重叠。当鼠标移上去时，环形菜单项整体变大，菜单的堆叠顺序也上移（z-index是决定元素的堆叠顺序）。最终就呈现出菜单项上浮的效果。
  1. .ca-menu li:hover{
  2. border-color: #333;
  3. z-index: 999;
  4. -webkit-transform: scale(1.1);
  5. -moz-transform: scale(1.1);
  6. -o-transform: scale(1.1);
  7. -ms-transform: scale(1.1);
  8. transform: scale(1.1);
  9. }
  10. .ca-menu li:hover .ca-icon{
  11. color: #000;
  12. font-size: 60px;
  13. text-shadow: 0px 0px 1px #000;
  14. -webkit-animation: moveFromBottom 300ms ease;
  15. -moz-animation: moveFromBottom 300ms ease;
  16. -ms-animation: moveFromBottom 300ms ease;
  17. }
  18. .ca-menu li:hover .ca-main{
  19. color: #000;
  20. -webkit-animation: moveFromBottom 500ms ease;
  21. -moz-animation: moveFromBottom 500ms ease;
  22. -ms-animation: moveFromBottom 500ms ease;
  23. }

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

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

摘自 http://www.okajax.com/a/201204/css3_menu_6.html

CSS3打造的10种创意动画菜单效果相关推荐

  1. html设置字体变瘦标签,使用CSS3 font-feature-settings特性减除字体动画震颤效果

    在做 GithubProfile 项目的时候,使用了数字动画展示的效果,如My GithubProfile页面中的commits,stars以及followers数字.实际使用中,由于数字字体不等宽, ...

  2. 这10种创意图表，能让可视化报告瞬间变得惊艳炫酷，5分钟学会

    老规矩,评.论.区有惊喜! 经常跟数据打交道的人,应该都体会过做数据报告.汇报PPT.数据报表的痛苦,痛苦的来源大部分都来自于领导和老板,不管是大公司还是小公司,几乎所有的数据和工作都要体现在ppt报 ...

  3. 前端特效demo | 一起围观 10 种创意时钟

    时钟动画应用非常广泛,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享 10 款形态各异的超时尚时钟动画,其中有圆盘时钟.创意时钟.电子时钟等,希望大家会喜欢. 文内附有时钟效果代 ...

  4. 纯css3开发的响应式设计动画菜单（支持ie8）

    这是一个响应式设计的菜单.单击列表图标,当你显示屏大小可以完全水平放下所有菜单项时,菜单水平显示(如图1).当你的显示屏不能水平放置所有菜单项时,菜单垂直显示(如图2). 而且显示的时候是以动画的型式 ...

  5. html5云朵效果,纯CSS3打造逼真的多层云彩动画特效

    这是一款效果非常炫酷的纯CSS3逼真的多层云彩动画特效.该特效使用多张透明的云彩PNG图片作为背景图片,使用CSS animation动画来制作云彩水平飘动的动画效果. 使用方法 HTML结构 该多层 ...

  6. 《怪物猎人世界》技术美术设计师：我们用这10种工具制作高品质效果

    <怪物猎人世界>可以说是今年全球销量成绩最好的主机游戏产品. 据10月18日卡普空官方公布的消息,这款游戏自今年1月发售开始,全球销量已突破1000万份,刷新了该公司单款游戏销量的最高纪录 ...

  7. HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

    首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果.就是鼠标移到元素上,感觉能够看到元素背后的信息. 大家假设制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语, ...

  8. HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果 以及图片提交

    今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放在使用该实例制作的相册之后都可以 ...

  9. 用CSS3如何实现钟摆动画的导航栏菜单效果

    我们都知道,CSS3可以实现很多很酷的动画效果,而今天我们将与大家分享一期用CSS3制作的钟摆动画菜单效果,在这个动画中,我们主要采用CSS3来控制SVG图标的左右摆动效果. 首先,我们需要在HTML ...

最新文章

  1. nodejs安装及环境配置（windows系统）
  2. 浅谈错排公式的推导及应用
  3. Java算法--串的简单处理
  4. Python中的常见面试题
  5. 移动云亮相 2021 IDC 年度盛典 共话变革与赋能
  6. 基于SSM + Redis的Shiro权限管理项目
  7. Character的static方法
  8. 中兴光猫不拆机获取超级密码
  9. matlab零序五次谐波,基于MATLAB的高次谐波接地选线保护仿真设计
  10. 作业周转时间以及平均等待时间
  11. CIO40: 学习.遇见更优秀的自己
  12. SQLT(SQLTXPLAIN)
  13. YTU OJ 2914 Problem A xiaoping学构造函数
  14. Linux：ip：rx_dropped； 丢包
  15. 网页设计基础学习（一）
  16. 管理进阶——利益分配机制
  17. SQL Server 2005通过端口1433连接到主机127.0.0.1的TCP/IP连接失败解决方案
  18. Java资源大全中文版-Awesome - java
  19. ULua与Unity交互原理
  20. 海康X86平台智能相机的使用注意事项

热门文章

  1. 超链接（按钮）点击变色，原来的恢复原色
  2. springboot kafka 怎样关闭kafka的在控制台打印的日志
  3. 神价键鼠：499元G903，159元G304，179元的Cherry键盘
  4. Matlab常用数值计算函数总结
  5. 复盘：我的三个月远程办公实践，有自由，也有代价
  6. 基本绘图函数：plot的使用
  7. 代码写个九宫格布局显示图片
  8. Ubuntu 18.04 安装最新版本wine（支持微信、企业微信）
  9. DMA测试（Direct Register Mode）（PS + PL）
  10. Python tkinter实战：课程表查询