本博之前曾经写过两篇博文《纯css3文字效果推荐》、《css3立体文字最佳实践》得到了大家的广泛认可，今天我们更进一步，研究一下文字菜单上可以做哪些动画，12种效果会不会由您喜欢的，来来来，开工。
本文案例演示代码我放在了codepen，速度可能有点慢，不过相信真正的前端童鞋应该喜欢codepen的强大之处。
本文介绍了12中效果，为了简化操作html部分适用haml，css部分适用scss。
#container
-(1..12).each do
%nav
%ul
%li
%a{:href=>‘#‘,:title=>‘首页‘} 首页
%li
%a{:href=>‘#‘,:title=>‘信息‘} 信息
%li
%a{:href=>‘#‘,:title=>‘作品‘} 作品
%li
%a{:href=>‘#‘,:title=>‘联系‘} 联系/* 参数设置 */
$color-accent: saturate(#008833,10%);
$duration: 500ms;
$timing: ease;
/* 重置*/
*, *:before, *:after { box-sizing: border-box; }
/*容器设置*/
#container{
counter-reset: counterA;
}
/*布局实现*/
nav {
position: relative;
width: 100vw;
padding: 10px 0;
background: $color-accent;
display: table;
counter-increment: counterA;
&:before{
content:counter(counterA);
color:rgba(255,255,255,.05);
font-size:200px;
position: absolute;
}
ul {
position: realtive;
display: table-cell;
vertical-align: middle;
text-align: center;
li a {
position: relative;
height: 40px;
margin: 20px;
display: inline-block;
font-size: 35pt;
color: rgba(#fff,0.5);
font-weight: 900;
line-height: 40px;
text-decoration: none;
&:before, &:after {
content: attr(title);
white-space:nowrap;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
overflow: hidden;
transition:all $duration $timing;
color: #fff;
}
}
}
//若干多的效果的实现
// &:nth-child(1){}
// $:nth-child(2){}
}
第一个效果灵感来自于《Trippeo》，昨天的博文《跟名站学前端之Trippeo》利用css clip实现过，被踩较多，继续研究更加适用的方式，利用宽度和高度配合overflow：hiddden也可以实现，而且效果更好，代码如下所示。
// 1 高度变化
&:nth-child(1) {
background: adjust-hue($color-accent,30deg);
a {
&:before {
height: 0;
opacity: 0;
}
&:hover:before {
height: 100%;
opacity: 1;
}
&:after { display: none; }
}
}
第二种效果跟第一种效果原理一样，就是实现宽度的变化。
// 2 ,宽度变化
&:nth-child(2) {
background: adjust-hue($color-accent,60deg);
a {
&:before {
width: 0;
}
&:hover:before {
width: 100%;
}
&:after { display: none; }
}
}
第三种效果换药不换汤，效果相同，我们使用不同的实现方式，使用clip，如下面代码所示。
// 3 ，clip变化
&:nth-child(3) {
background: adjust-hue($color-accent,90deg);
a {
&:before {
clip: rect(0,0,50px,0);
}
&:hover:before {
clip: rect(0,100px,50px,0);
}
&:after { display: none; }
}
}
第四种效果同样使用clip，不过第三种效果使用clip:rect()，第四种方式使用clip:circle()这种方式目前支持webkit浏览器，浏览器不给力的同学请勿吐槽。
// 4 clip path circle
&:nth-child(4) {
background: adjust-hue($color-accent,120deg);
a {
&:before {
clip-path: circle(1px at 1px 1px);
}
&:hover:before {
clip-path: circle(50px at 40px 30px);
}
&:after { display: none; }
}
}
第五种效果同样使用clip实现，我们给文字加一个渐变下划线，使用width的变化应该也可以，大家可以自行尝试。
// 5， 渐变下划线
&:nth-child(5) {
background: adjust-hue($color-accent,150deg);
a {
&:before {
top:50px;
content:"";
height:2px;
clip: rect(0,0,50px,0);
opacity: .2;
background: linear-gradient(left , rgb(255, 208, 243) 11% , rgb(15, 42, 145) 93%);
background: -o-linear-gradient(left , rgb(255, 208, 243) 11% , rgb(15, 42, 145) 93%);
background: -ms-linear-gradient(left , rgb(255, 208, 243) 11% , rgb(15, 42, 145) 93%);
background: -moz-linear-gradient(left , rgb(255, 208, 243) 11% , rgb(15, 42, 145) 93%);
background: -webkit-linear-gradient(left , rgb(255, 208, 243) 11% , rgb(15, 42, 145) 93%);
}
&:hover:before {
opacity: 1;
clip: rect(0,240px,50px,0);
}
&:after { display: none; }
}
}
第六种效果，我们来给:before实现的下划线来点动画。
// 6 下划线动画
&:nth-child(6) {
background: adjust-hue($color-accent,180deg);
a {
&:before {
top:48px;
content:"";
height:2px;
background-color:rgba(#fff,0.2);
}
&:hover:before {
top:22px;
background-color:rgba(#fff,0.5);
}
&:after { display: none; }
}
}
又是一种修饰线条动画，两条线原来在两侧，hover之后移动文字下方。
// 7，修饰线条动画
&:nth-child(7) {
background: adjust-hue($color-accent,360deg);
a {
&:before,&:after {
width:2px;
height:38px;
content:"";
background-color: rgba(255,255,255,.2);
position: absolute;
}
&:before {
transform-origin:30px 20px;
}
&:after {
transform-origin:30px 20px;
transform:translateX(94px);
}
&:hover:before {
height:80px;
transform:rotate(-90deg);
background-color: rgba(255,255,255,.4);
}
&:hover:after {
height:80px;
transform:translateX(40px) translateY(64px) rotate(90deg);
background-color: rgba(255,255,255,.6);
}
}
}
第八种效果为提示文字变大动画，:before伪对象实现提示文字，hover之后提示文字由小变大，透明度从0到1。
// 8，提示文字变大
&:nth-child(8) {
background: adjust-hue($color-accent,240deg);
a {
&:before {
top: 0; left: 0; right: 0; bottom: 0;
opacity: 0;
visibility: hidden;
transform: scale(0.5);
}
&:hover:before {
opacity: 1;
visibility: visible;
transform: scale(1);
}
&:after { display: none; }
}
}
第九种效果为第八种的一个变体，提示文字由大变小。
// 9，提示文字由大变小
&:nth-child(9) {
background: adjust-hue($color-accent,210deg);
a {
&:before {
top: 0; left: 0; right: 0; bottom: 0;
opacity: 0;
visibility: hidden;
transform: scale(1.5);
}
&:hover:before {
opacity: 1;
visibility: visible;
transform: scale(1);
}
&:after { display: none; }
}
}
第十种效果使用了:before和:after两个伪对象，分别从左右两侧向中间集中。
// 10，两侧向中间
&:nth-child(10) {
background: adjust-hue($color-accent,270deg);
a {
&:before, &:after {
top: 0; left: 0; right: 0; bottom: 0;
opacity: 0;
visibility: hidden;
}
&:before { transform: translateX(-100%); }
&:after { transform: translateX(100%); }
&:hover:before, &:hover:after {
opacity: 1;
visibility: visible;
transform: none;
}
}
}
第十一种效果由第十种变种而来，:before和:after两个伪对象形成的提示文字从上下到中间。
// 11， 上下到中间
&:nth-child(11) {
background: adjust-hue($color-accent,300deg);
a {
&:before, &:after {
top: 0; left: 0; right: 0; bottom: 0;
opacity: 0;
visibility: hidden;
}
&:before { transform: translateY(-100%); }
&:after { transform: translateY(100%); }
&:hover:before, &:hover:after {
opacity: 1;
visibility: visible;
transform: none;
}
}
}
第十二种效果简化了第十一种效果，仅仅使用:before伪对象实现动画。
// 12
&:nth-child(12) {
background: adjust-hue($color-accent,330deg);
a {
&:before {
top: 0; left: 0; right: 0; bottom: 0;
opacity: 0;
visibility: hidden;
transform: translateY(-100%);
}
&:hover:before {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
&:after { display: none; }
}
}感谢您阅读本文，如果您能看到这里，说明您有强烈的求知欲和超强的毅力，成功已经不远了。
最后欢迎留言互动，如果您觉得好就点个赞，如果觉得不好请您踩了之后帮帮我，给我提点意见，万分感谢。
----------------------------------------------------------
前端开发whqet，关注前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------
原文地址：http://blog.csdn.net/whqet/article/details/43300537
