案例：筋斗云动画效果（导航栏动画）

筋斗云动画效果

1. 利用动画函数做动画效果
2. 原先筋斗云起始位置为0
3. 鼠标经过某个li 把当前 li 的 offsetLeft 位置作为目标值即可
4. 鼠标离开某个li ，就把目标值设为0
5. 如果点击了某个li ,就把 li 当前的位置存储起来，作为筋斗云的起始位置

 <style>
      * {
   
        padding: 0;
        margin: 0;
      }
      li,
      a {
   
        text-decoration: none;
      }
      .c-nav {
   
        position: relative;
        width: 1200px;
        height: 60px;
        background: paleturquoise;
        margin: 10px auto;
        text-align: center;
      }
      ul {
   
        display: flex;
        list-style: none;
        padding: 0 20px;
      }
      .c-nav li {
   
        width: 120px;
        font-size: 16px;
        font-weight: 700;
        text-align:<