文字菜单动画畅想

本博之前曾经写过两篇博文《纯css3文字效果推荐》、《css3立体文字最佳实践》得到了大家的广泛认可，今天我们更进一步，研究文字菜单上可以做哪些动画，12种效果会不会有您喜欢的，来来来，开工。

本文案例演示代码我放在了codepen，速度可能有点慢，不过相信真正的前端童鞋应该喜欢codepen的强大之处。

        --------------------------------------------------------------------------------------------------------------------------------------------------------------------------

                                             ==== 文字菜单畅想====    == 全屏预览==   == 在线编辑==    == 下载收藏== 

        --------------------------------------------------------------------------------------------------------------------------------------------------------------------------

本文介绍了12种效果，为了简化操作html部分适用haml，css部分适用scss。

[html]  view plain copy

1. #container  
2.   -(1..12).each do  
3.     %nav  
4.       %ul  
5.         %li  
6.           %a{:href=>'#',:title=>'首页'} 首页  
7.         %li  
8.           %a{:href=>'#',:title=>'信息'} 信息  
9.         %li  
10.           %a{:href=>'#',:title=>'作品'} 作品  
11.         %li  
12.           %a{:href=>'#',:title=>'联系'} 联系  

[css]  view plain copy

1. /* 参数设置 */  
2. $color-accent: saturate(#008833,10%);  
3. $duration: 500ms;   
4. $timing: ease;  
5. /* 重置*/  
6. *, *:before, *:after { box-sizing: border-box; }   
7. /*容器设置*/  
8. #container{  
9.   counter-reset: counterA;  
10. }  
11. /*布局实现*/  
12. nav {  
13.   position: relative;  
14.   width: 100vw;  
15.   padding: 10px 0;  
16.   background: $color-accent;  
17.   display: table;  
18.   counter-increment: counterA;  
19.    &:before{  
20.     content:counter(counterA);  
21.     color:rgba(255,255,255,.05);  
22.     font-size:200px;  
23.     position: absolute;  
24.   }  
25.   ul {  
26.     position: realtive;  
27.     display: table-cell;  
28.     vertical-align: middle;  
29.     text-align: center;  
30.     li a {  
31.       position: relative;  
32.       height: 40px;  
33.       margin: 20px;  
34.       display: inline-block;  
35.       font-size: 35pt;  
36.       color: rgba(#fff,0.5);  
37.       font-weight: 900;  
38.       line-height: 40px;  
39.       text-decoration: none;  
40.       &:before, &:after {  
41.         content: attr(title);  
42.         white-space:nowrap;  
43.         position: absolute;  
44.         top: 0; left: 0; right: 0; bottom: 0;  
45.         overflow: hidden;  
46.         transition:all $duration $timing;  
47.         color: #fff;  
48.       }  
49.     }  
50.   }  
51.   //若干多的效果的实现  
52.   // &:nth-child(1){}  
53.   // &:nth-child(2){}  
54. }  

第一种效果

第一个效果灵感来自于《Trippeo》，昨天的博文《跟名站学前端之Trippeo》利用css clip实现过，被踩较多，继续研究更加适用的方式，利用宽度和高度配合overflow：hiddden也可以实现，而且效果更好，代码如下所示。

[css]  view plain copy

1. // 1 高度变化  
2.   &:nth-child(1) {  
3.     background: adjust-hue($color-accent,30deg);  
4.     a {  
5.       &:before {  
6.         height: 0;  
7.         opacity: 0;  
8.       }  
9.       &:hover:before {   
10.         height: 100%;   
11.         opacity: 1;  
12.       }  
13.       &:after { display: none; }  
14.     }  
15.   }  

第二种效果

第二种效果跟第一种效果原理一样，就是实现宽度的变化。

[css]  view plain copy

1. // 2 ,宽度变化  
2.   &:nth-child(2) {   
3.     background: adjust-hue($color-accent,60deg);  
4.     a {  
5.       &:before {  
6.         width: 0;  
7.       }  
8.       &:hover:before {   
9.          width: 100%;   
10.       }  
11.       &:after { display: none; }  
12.     }  
13.   }  

第三种效果

第三种效果换药不换汤，效果相同，我们使用不同的实现方式，使用clip，如下面代码所示。

[css]  view plain copy

1. // 3 ，clip变化  
2.  &:nth-child(3) {   
3.    background: adjust-hue($color-accent,90deg);  
4.    a {  
5.      &:before {  
6.        clip: rect(0,0,50px,0);  
7.      }  
8.      &:hover:before {   
9.        clip: rect(0,100px,50px,0);  
10.      }  
11.      &:after { display: none; }  
12.    }  
13.  }  

第四种效果

第四种效果同样使用clip，不过第三种效果使用clip:rect()，第四种方式使用clip:circle()这种方式目前支持webkit浏览器，浏览器不给力的同学请勿吐槽。

[css]  view plain copy

1. // 4  clip path circle  
2.    &:nth-child(4) {   
3.     background: adjust-hue($color-accent,120deg);  
4.     a {  
5.       &:before {  
6.         clip-path: circle(1px at 1px 1px);  
7.       }  
8.       &:hover:before {   
9.         clip-path: circle(50px at 40px 30px);  
10.       }  
11.       &:after { display: none; }  
12.     }  
13.   }  

第五种效果

第五种效果同样使用clip实现，我们给文字加一个渐变下划线，使用width的变化应该也可以，大家可以自行尝试。

[css]  view plain copy

1. // 5， 渐变下划线    
2.   &:nth-child(5) {   
3.     background: adjust-hue($color-accent,150deg);  
4.     a {  
5.       &:before {  
6.         top:50px;  
7.         content:"";  
8.         height:2px;  
9.         clip: rect(0,0,50px,0);  
10.         opacity: .2;  
11.         background: linear-gradient(left , rgb(255, 208, 243) 11% , rgb(15, 42, 145) 93%);  
12.         background: -o-linear-gradient(left , rgb(255, 208, 243) 11% , rgb(15, 42, 145) 93%);  
13.         background: -ms-linear-gradient(left , rgb(255, 208, 243) 11% , rgb(15, 42, 145) 93%);  
14.         background: -moz-linear-gradient(left , rgb(255, 208, 243) 11% , rgb(15, 42, 145) 93%);  
15.         background: -webkit-linear-gradient(left , rgb(255, 208, 243) 11% , rgb(15, 42, 145) 93%);  
16.       }  
17.       &:hover:before {   
18.         opacity: 1;  
19.         clip: rect(0,240px,50px,0);  
20.       }  
21.       &:after { display: none; }  
22.     }  
23.   }  

第六种效果

第六种效果，我们来给:before实现的下划线来点动画。

[css]  view plain copy

1. // 6 下划线动画  
2.  &:nth-child(6) {   
3.    background: adjust-hue($color-accent,180deg);  
4.    a {  
5.      &:before {  
6.        top:48px;  
7.        content:"";  
8.        height:2px;  
9.        background-color:rgba(#fff,0.2);  
10.      }  
11.      &:hover:before {  
12.        top:22px;  
13.        background-color:rgba(#fff,0.5);  
14.      }  
15.      &:after { display: none; }  
16.    }  
17.  }  

第七种效果

又是一种修饰线条动画，两条线原来在两侧，hover之后移动文字下方。

[css]  view plain copy

1. // 7，修饰线条动画  
2. &:nth-child(7) {   
3.   background: adjust-hue($color-accent,360deg);  
4.   a {  
5.     &:before,&:after {  
6.       width:2px;  
7.       height:38px;  
8.       content:"";  
9.       background-color: rgba(255,255,255,.2);  
10.       position: absolute;  
11.     }  
12.     &:before {  
13.       transform-origin:30px 20px;  
14.     }  
15.     &:after {   
16.       transform-origin:30px 20px;  
17.       transform:translateX(94px);  
18.     }  
19.     &:hover:before {  
20.       height:80px;  
21.       transform:rotate(-90deg);  
22.       background-color: rgba(255,255,255,.4);  
23.     }  
24.     &:hover:after {  
25.       height:80px;  
26.       transform:translateX(40px) translateY(64px) rotate(90deg);  
27.       background-color: rgba(255,255,255,.6);  
28.     }  
29.   }  
30. }  

第八种效果

第八种效果为提示文字变大动画，:before伪对象实现提示文字，hover之后提示文字由小变大，透明度从0到1。

[css]  view plain copy

1. // 8，提示文字变大  
2. &:nth-child(8) {   
3.   background: adjust-hue($color-accent,240deg);  
4.   a {  
5.     &:before {  
6.       top: 0; left: 0; right: 0; bottom: 0;  
7.       opacity: 0;  
8.       visibility: hidden;  
9.       transform: scale(0.5);  
10.     }  
11.     &:hover:before {  
12.       opacity: 1;  
13.       visibility: visible;  
14.       transform: scale(1);  
15.     }  
16.     &:after { display: none; }  
17.   }  
18. }  

第九种效果

第九种效果为第八种的一个变体，提示文字由大变小。

[css]  view plain copy

1. // 9，提示文字由大变小  
2. &:nth-child(9) {   
3.   background: adjust-hue($color-accent,210deg);  
4.   a {  
5.     &:before {  
6.       top: 0; left: 0; right: 0; bottom: 0;  
7.       opacity: 0;  
8.       visibility: hidden;  
9.       transform: scale(1.5);  
10.     }  
11.     &:hover:before {  
12.       opacity: 1;  
13.       visibility: visible;  
14.       transform: scale(1);  
15.     }  
16.     &:after { display: none; }  
17.   }  
18. }  

第十种效果

第十种效果使用了:before和:after两个伪对象，分别从左右两侧向中间集中。

[css]  view plain copy

1. // 10，两侧向中间  
2. &:nth-child(10) {   
3.   background: adjust-hue($color-accent,270deg);  
4.   a {  
5.     &:before, &:after {  
6.       top: 0; left: 0; right: 0; bottom: 0;  
7.       opacity: 0;  
8.       visibility: hidden;  
9.     }  
10.     &:before { transform: translateX(-100%); }  
11.     &:after { transform: translateX(100%); }  
12.     &:hover:before, &:hover:after {  
13.       opacity: 1;  
14.       visibility: visible;  
15.       transform: none;  
16.     }  
17.   }  
18. }  

第十一种效果

第十一种效果由第十种变种而来，:before和:after两个伪对象形成的提示文字从上下到中间。

[css]  view plain copy

1. // 11， 上下到中间  
2. &:nth-child(11) {   
3.   background: adjust-hue($color-accent,300deg);  
4.   a {  
5.     &:before, &:after {  
6.       top: 0; left: 0; right: 0; bottom: 0;  
7.       opacity: 0;  
8.       visibility: hidden;  
9.     }  
10.     &:before { transform: translateY(-100%); }  
11.     &:after { transform: translateY(100%); }  
12.     &:hover:before, &:hover:after {  
13.       opacity: 1;  
14.       visibility: visible;  
15.       transform: none;  
16.     }  
17.   }  
18. }  

第十二种效果

第十二种效果简化了第十一种效果，仅仅使用:before伪对象实现动画。

[css]  view plain copy

1. // 12  
2.   &:nth-child(12) {   
3.     background: adjust-hue($color-accent,330deg);  
4.     a {  
5.       &:before {  
6.         top: 0; left: 0; right: 0; bottom: 0;  
7.         opacity: 0;  
8.         visibility: hidden;  
9.         transform: translateY(-100%);  
10.       }  
11.       &:hover:before {  
12.         opacity: 1;  
13.         visibility: visible;  
14.         transform: translateY(0);  
15.       }  
16.       &:after { display: none; }  
17.     }  
18.   }  

感谢您阅读本文，如果您能看到这里，说明您有强烈的求知欲和超强的毅力，成功已经不远了。

最后欢迎留言互动，如果您觉得好就点个赞，如果觉得不好请您踩了之后帮帮我，给我提点意见，万分感谢。