首页 > 代码库 > 文字菜单动画畅想

文字菜单动画畅想

2024-11-22 05:56:39   202人阅读

<style>p{text-indent:2em;}</style>前端开发whqet,csdn,王海庆,whqet,前端开发专家

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

技术分享

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

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

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

#container
  -(1..12).each do
    %nav
      %ul
        %li
          %a{:href=http://www.mamicode.com/>‘#‘,: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，关注前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------
文字菜单动画畅想


联系
我们