文字菜單動畫暢想

本博之前曾經寫過兩篇博文《純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; }
    }
  }

感謝您閱讀本文，如果您能看到這裏，說明您有強烈的求知慾和超強的毅力，成功已經不遠了。

最後歡迎留言互動，如果您覺得好就點個贊，如果覺得不好請您踩了之後幫幫我，給我提點意見，萬分感謝。