文字菜单动画畅想

矫情吗；* 2022-08-06 14:07 157阅读 0赞

前端开发whqet,csdn,王海庆,whqet,前端开发专家

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

![Center][]

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

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

==== 文字菜单畅想====    == [全屏预览][Link 1]==   == [在线编辑][Link 2]==    == [下载收藏][Link 3]==

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

本文介绍了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){}
    }

## 第一种效果 ##

![1422569150_4737.gif][]

第一个效果灵感来自于《[Trippeo][]》，昨天的博文《[跟名站学前端之Trippeo][Trippeo 1]》利用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; }
        }
      }

## 第二种效果 ##

![1422569151_7808.gif][]

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

// 2 ,宽度变化
      &:nth-child(2) { 
        background: adjust-hue($color-accent,60deg);
        a {
          &:before {
            width: 0;
          }
          &:hover:before { 
             width: 100%; 
          }
          &:after { display: none; }
        }
      }

## 第三种效果 ##

![1422569151_1059.gif][]

第三种效果换药不换汤，效果相同，我们使用不同的实现方式，使用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; }
        }
      }

## 第四种效果 ##

![1422569151_4857.gif][]

第四种效果同样使用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; }
        }
      }

## 第五种效果 ##

![1422569152_9172.gif][]

第五种效果同样使用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; }
        }
      }

## 第六种效果 ##

![1422569184_5447.gif][]

第六种效果，我们来给: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; }
        }
      }

## 第七种效果 ##

![1422569184_8906.gif][]

又是一种修饰线条动画，两条线原来在两侧，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);
          }
        }
      }

## 第八种效果 ##

![1422569184_1591.gif][]

第八种效果为提示文字变大动画，: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; }
        }
      }

## 第九种效果 ##

![1422569185_5264.gif][]

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

// 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; }
        }
      }

## 第十种效果 ##

![1422569185_1752.gif][]

第十种效果使用了: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;
          }
        }
      }

## 第十一种效果 ##

![1422569203_3551.gif][]

第十一种效果由第十种变种而来，: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;
          }
        }
      }

## 第十二种效果 ##

![1422569203_1880.gif][]

第十二种效果简化了第十一种效果，仅仅使用: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; }
        }
      }

又加了三个效果哈，大家看看哈。

## 第十三种效果 ##

![1422795809_3439.gif][]

// 13
      &:nth-child(13) { 
        background: adjust-hue($color-accent,360deg);
        a {
          &:before,&:after {
            width:0px;
            height:2px;
            background-color: #fff;
            content:"";
            left:auto;right:auto;
            top:auto;bottom:auto;
          }
          &:before{
            left:0;
            top:-4px;
          }
          &:after{
            right:0;
            bottom:-4px;
          }
          &:hover:before,&:hover:after {
            width:100px;
          }
        }
      }

## 第十四种效果 ##

![1422795810_9191.gif][]

这里需要四条线，我们可以使用a的:before和:after伪对象实现两条，另外两条就不好实现了。我们在a之外再套个壳儿span，然后用这个壳儿的:before和:after伪对象实现另外两条线。

// 14
      &:nth-child(14) { 
        background: adjust-hue($color-accent,390deg);
        span{
          display: inline-block;
          width:100px;
          height:44px;
          margin:20px;
          position: relative;
          &:before,&:after {
            width:0px;
            height:2px;
            background-color: #fff;
            content:"";
            position: absolute;
            transition:all $duration $timing;
          }
          &:before{
            left:0;
            top:-6px;
          }
          &:after{
            right:0;
            bottom:-2px;
          }
          &:hover:before,&:hover:after{
            width:100px;
          }
        }
        a {
          margin:0;
          &:before,&:after {
            width:2px;
            height:0px;
            background-color: #fff;
            content:"";
            left:auto;right:auto;
            top:auto;bottom:auto;
          }
          &:before{
            left:-2px;
            top:-4px;
          }
          &:after{
            right:-2px;
            bottom:-4px;
          }
          &:hover:before,&:hover:after {
            height:50px;
          }
        }
      }

## 第十五种效果 ##

![1422795810_7120.gif][]

// 15
      &:nth-child(15) { 
        background: adjust-hue($color-accent,420deg);
        span{
          display: inline-block;
          width:100px;
          height:44px;
          margin:20px;
          position: relative;
          &:before,&:after {
            width:0px;
            height:2px;
            background-color: #fff;
            content:"";
            position: absolute;
            transition:all $duration/4 $timing;
          }
          //top线
          &:before{
            left:0;
            top:-6px;
             transition-delay:$duration/4*3;
          }
          //bottom线
          &:after{
            right:0;
            bottom:-2px;
            transition-delay:$duration/4;
          }
          &:hover:before{
            width:100px;
            transition-delay:$duration/4*0;
          }
          &:hover:after{
            width:100px;
            transition-delay:$duration/4*2;
          }
        }
        a {
          margin:0;
          &:before,&:after {
            width:2px;
            height:0px;
            background-color: #fff;
            content:"";
            left:auto;right:auto;
            top:auto;bottom:auto;
            transition:all $duration/4 $timing;
          }
          //left线
          &:before{
            left:-2px;
            bottom:-4px;
            transition-delay:0;
          }
          //right线
          &:after{
            right:-2px;
            top:-4px;
            transition-delay:$duration/4*2;
          }
          &:hover:before{
            height:50px;
            transition-delay:$duration/4*3;
          }
          &:hover:after {
            height:50px;
            transition-delay:$duration/4;
          }
        }
      }

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

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

\----------------------------------------------------------

[前端开发whqet][whqet]，关注前端开发，分享相关资源，欢迎点赞，欢迎拍砖。

\---------------------------------------------------------------------------------------------------------

[css3]: http://blog.csdn.net/whqet/article/details/24793049
[css3 1]: http://blog.csdn.net/whqet/article/details/25051237
[Center]: /images/20220806/e3afe5bfb7094003b7c83698a86c6b7b.png
[Link 1]: http://codepen.io/whqet/full/zxdPYa/
[Link 2]: http://codepen.io/whqet/pen/zxdPYa
[Link 3]: http://codepen.io/whqet/share/zip/zxdPYa/
[1422569150_4737.gif]: https://img-my.csdn.net/uploads/201501/30/1422569150_4737.gif
[Trippeo]: https://www.trippeo.com/
[Trippeo 1]: http://blog.csdn.net/whqet/article/details/43265769
[1422569151_7808.gif]: https://img-my.csdn.net/uploads/201501/30/1422569151_7808.gif
[1422569151_1059.gif]: https://img-my.csdn.net/uploads/201501/30/1422569151_1059.gif
[1422569151_4857.gif]: https://img-my.csdn.net/uploads/201501/30/1422569151_4857.gif
[1422569152_9172.gif]: https://img-my.csdn.net/uploads/201501/30/1422569152_9172.gif
[1422569184_5447.gif]: https://img-my.csdn.net/uploads/201501/30/1422569184_5447.gif
[1422569184_8906.gif]: https://img-my.csdn.net/uploads/201501/30/1422569184_8906.gif
[1422569184_1591.gif]: https://img-my.csdn.net/uploads/201501/30/1422569184_1591.gif
[1422569185_5264.gif]: https://img-my.csdn.net/uploads/201501/30/1422569185_5264.gif
[1422569185_1752.gif]: https://img-my.csdn.net/uploads/201501/30/1422569185_1752.gif
[1422569203_3551.gif]: https://img-my.csdn.net/uploads/201501/30/1422569203_3551.gif
[1422569203_1880.gif]: https://img-my.csdn.net/uploads/201501/30/1422569203_1880.gif
[1422795809_3439.gif]: https://img-my.csdn.net/uploads/201502/01/1422795809_3439.gif
[1422795810_9191.gif]: https://img-my.csdn.net/uploads/201502/01/1422795810_9191.gif
[1422795810_7120.gif]: https://img-my.csdn.net/uploads/201502/01/1422795810_7120.gif
[whqet]: http://blog.csdn.net/whqet