网站导航部分-鼠标跟随滑动效果

爱被打了一巴掌 2022-10-13 05:21 188阅读 0赞

> htm部分

<div class="header">
      <div class="logo" id="toIndex">
        <img src="../imgs/pc/common/header/logo.png" alt="" />
      </div>
      <ul class="menu" id="menu">
        <li id="menu_know" class="menu-item">了解OKR</li>
        <li id="menu_pro" class="menu-item">
          功能
          <img
            class="menu_pro_arrow"
            src="/imgs/pc/common/header/down.png"
            alt=""
          />
          <ul id="menu-item-pro" class="menu-item-pro">
            <li id="mbo">
              <span class="menu-item-pro-icon"
                ><img src="imgs/pc/common/header/mbo-icon.png" alt="" /></span
              >目标管理
            </li>
            <li id="kpi">
              <span class="menu-item-pro-icon"
                ><img src="imgs/pc/common/header/kpi-icon.png" alt="" /></span
              >绩效管理
            </li>
            <li id="pm">
              <span class="menu-item-pro-icon"
                ><img src="imgs/pc/common/header/pm-icon.png" alt="" /></span
              >项目管理
            </li>
          </ul>
          <div class="mask" id="mask"></div>
        </li>
        <li id="menu_price" class="menu-item">价格</li>
        <li id="menu_knowledge" class="menu-item">OKR加油站</li>
        <li id="menu_down" class="menu-item">下载</li>
        <li id="menu_about" class="menu-item">OKR落地培训</li>
        <span class="under"></span>
      </ul>
      <div class="btns">
        <span class="login" id="toLogin">登录</span>
        <div class="free-btn" id="toRegist">免费试用</div>
        <div class="phone">
          <span class="phone-icon"
            ><img src="imgs/pc/common/header/phone.png" alt=""
          /></span>
          400-620-5999
        </div>
      </div>
    </div>
    <script src="js/pc/header.js" async></script>

> js

> css

.header { 
          width: 1240px;
          margin: 0 auto;
          padding: 24px 0 30px 0;
          height: 46px; .menu { 
            float: left;
            display: flex;
            font-size: 16px;
            line-height: 46px;
            margin-left: 17px;
            position: relative;
            // left: 40px; .menu-item { 
              margin-left: 58px;
              cursor: pointer;
              color: #14142b; .menu_pro_arrow { 
                width: 10px;
                position: relative;
                left: 10px;
              }
              // .rotate { 
              //     transform-origin:center center;//旋转中心要是正中间 才行
              //     transform:rotate(180deg);
              // }
              // .rotate1{ 
              //       transform-origin:center center;
              //       transform:rotate(0deg); //返回原点
              //   }
              .rotate { 
                transform-origin: center center;
                transform: rotate(180deg);
                transition: 0.2s;
              }
              .rotate1 { 
                transform-origin: center center;
                transform: rotate(0deg);
                transition: 0.2s;
              }
            }
            .menu-item:nth-child(2) { 
              position: relative;
            }
            .mask { 
              height: 24px;
              width: 64px;
              position: absolute;
            }
            .menu-item-pro { 
              display: none;
              position: absolute;
              width: 190px;
              opacity: 1;
              border-radius: 14px;
              box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.06);
              margin-top: 24px;
              left: -64px;
              padding: 24px 0;
              background-color: white; li { 
                height: 60px;
                padding-left: 25px;
                border-left: 6px transparent solid;
                line-height: 60px;
              }
              // li:hover { 
              //   border-left: 6px #00ba88 solid;
              //   background: rgba(0, 186, 136, 0.04);
              // }
              .menu-item-pro-icon { 
                display: inline-block;
                width: 18px;
                height: 18px;
                position: relative;
                top: 2.5px;
                margin-right: 10px; img { 
                  width: 18px;
                }
              }
            }
    
            .under { 
              display: none;
              position: absolute;
              left: 0;
              bottom: 0;
              width: 35px;
              height: 2px;
              background-color: #3a78f6;
            }
          }
          .logo { 
            float: left; img { 
              width: 157px;
            }
            cursor: pointer;
          }
          .btns { 
            float: right;
            position: relative;
            top: 8px; .login, .phone, .free-btn { 
              display: inline-block;
            }
            .login { 
              color: #3a78f6;
              font-size: 16px;
              cursor: pointer;
            }
            .free-btn { 
              margin-left: 10px;
              width: 98px;
              height: 30px;
              background: #3a78f6;
              border-radius: 20px;
              line-height: 30px;
              color: white;
              text-align: center;
              position: relative;
              cursor: pointer;
              font-size: 14px; &:hover { 
                background: #6193f8;
              }
            }
            .phone { 
              margin-left: 10px;
              cursor: pointer;
              width: 134px;
              font-size: 14px;
              color: #3a78f6;
              height: 30px;
              line-height: 30px;
              text-align: right;
              padding-right: 24px;
              border: 1px solid #3a78f6;
              border-radius: 21px; .phone-icon { 
                display: inline-block;
                margin-right: 6px; img { 
                  width: 16px;
                  position: relative;
                  top: 3px;
                }
              }
            }
          }
        }