前言

大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟

开开心心学技术大法~~

来了来了，他真的来了~

正文

实现思路

首先是背景
- 背景很简单，一个background-image即可
然后是js事件
- 可以看到，是触发click事件之后开始了动画
- 因此利用classList.toggle添加.active或移除active即可
最后是中间的动画实现
- 可以将动画拆解成三部
  1. 宽度的transtion变化
    - 包括nav的宽度变化
    - 文字的宽度变化
    - 右侧icon的宽度变化
  2. 文字内容的rotateY旋转动画
  3. icon的rotateZ旋转动画
    1. 当然，icon也额外有一个translate的变化，因为要从=变化成X，所以需要稍微的调整一下translate信息
将以上综合实现即可

具体实现

html基础结构

  <body>
    <nav class="active" id="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Works</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <button class="icon" id="toggle">
        <div class="line line1"></div>
        <div class="line line2"></div>
      </button>
    </nav>
    <script src="script.js"></script>
  </body>

html结构没什么好说的，都是基础的

js部分

const toggle = document.getElementById('toggle')
const nav = document.getElementById('nav')

toggle.addEventListener('click', () => nav.classList.toggle('active'))

关键部分是nav.classList.toggle('active')

动态样式部分

静态样式就不说了，主要说下上面的动画部分即可

宽度动画

添加transtion属性

nav {
  transition: width 0.6s linear;
  overflow-x: hidden;
}
nav ul {
  transition: width 0.6s linear;
}

添加宽度变化

nav.active {
  width: 350px;
}
nav.active ul {
  width: 100%;
}
nav.active ul li {
  opacity: 1;
  transform: rotateY(360deg);
}

旋转动画

nav ul li {
  transform: rotateY(0deg);
  opacity: 0;
  transition: transform 0.6s linear, opacity 0.6s linear;
}
.icon .line {
  transition: transform 0.6s linear;
}

nav.active .icon .line1 {
  transform: rotate(-765deg) translateY(5.5px);
}
nav.active .icon .line2 {
  transform: rotate(765deg) translateY(-5.5px);
}

这里icon多了个translateY的变化

完整代码

总结

没有难点，只是温习了下rotate与transtion的用法

结语

如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~

热爱开源，支持开源，拥抱开源！

文章如有错误或不严谨之处，还望指出，感谢感谢！！！

加油！

往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」