导航菜单动画

下载代码

html

css

分享到微信朋友圈

html

<a href="#" class="btn">
    Calendar
    <div class="right">
      <svg x="0px" y="0px" viewBox="0 0 9 14" xml:space="preserve">
        <polygon fill="#FFFFFF" points="9,7 2,14 0,12 5,7 0,2 2,0 "/>
      </svg>
      <span class="before">
      </span>
      <span class="after">
        <svg x="0px" y="0px"viewBox="0 0 14 14" xml:space="preserve">
        <g>
          <path fill="#FFFFFF" d="M11,2V0H9v2H5V0H3v2H0v12h14V2H11z M12,12H2V5h10V12z"/>
          <rect fill="#FFFFFF" x="3" y="6" width="2" height="2"/>
          <rect fill="#FFFFFF" x="3" y="9" width="2" height="2"/>
          <rect fill="#FFFFFF" x="6" y="6" width="2" height="2"/>
          <rect fill="#FFFFFF" x="6" y="9" width="2" height="2"/>
          <rect fill="#FFFFFF" x="9" y="6" width="2" height="2"/>
          <rect fill="#FFFFFF" x="9" y="9" width="2" height="2"/>
        </g>
        </svg>
      </span>
    </div>
  </a>

<a href="#" class="btn">
    Cloud
    <div class="right">
      <svg x="0px" y="0px" viewBox="0 0 9 14" xml:space="preserve">
        <polygon fill="#FFFFFF" points="9,7 2,14 0,12 5,7 0,2 2,0 "/>
      </svg>
      <span class="before">
      </span>
      <span class="after">
        <svg x="0px" y="0px" viewBox="0 0 14 14" xml:space="preserve">
           <path fill="#FFFFFF" d="M12.3,8h-0.8C11.8,7.4,12,6.7,12,6c0-2.2-1.8-4-4-4C6.1,2,4.5,3.3,4.1,5.1C3.9,5,3.7,5,3.5,5
           C1.6,5,0,6.6,0,8.5S1.6,12,3.5,12c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0h8.6c0.9,0,1.7-0.9,1.7-2C14,8.9,13.2,8,12.3,8z"/>
        </svg>
      </span>
    </div>
  </a>
  
  <a href="#" class="btn">
    Location
    <div class="right">
      <svg x="0px" y="0px" viewBox="0 0 9 14" xml:space="preserve">
        <polygon fill="#FFFFFF" points="9,7 2,14 0,12 5,7 0,2 2,0 "/>
      </svg>
      <span class="before">
      </span>
      <span class="after">
        <svg x="0px" y="0px" viewBox="0 0 14 14" xml:space="preserve">
          <path fill="#FFFFFF" d="M12,5c0-2.8-2.2-5-5-5S2,2.2,2,5c0,1.1,0.4,2.2,1,3h0l4,6l4-6h0C11.6,7.2,12,6.1,12,5z M7,7C5.9,7,5,6.1,5,5
          c0-1.1,0.9-2,2-2s2,0.9,2,2C9,6.1,8.1,7,7,7z"/>
        </svg>
      </span>
    </div>
  </a>

<a href="#" class="btn">
    Settings
    <div class="right">
      <svg x="0px" y="0px" viewBox="0 0 9 14" xml:space="preserve">
        <polygon fill="#FFFFFF" points="9,7 2,14 0,12 5,7 0,2 2,0 "/>
      </svg>
      <span class="before">
      </span>
      <span class="after">
        <svg x="0px" y="0px" viewBox="0 0 13.4 14" xml:space="preserve">
          <path fill="#FFFFFF" d="M11.9,7c0-0.3,0-0.6-0.1-0.8l1.5-1.3c-0.3-1-0.8-1.9-1.5-2.6L10,3C9.5,2.6,9.1,2.3,8.5,2.1L8.2,0.2
          C7.7,0.1,7.2,0,6.7,0c-0.5,0-1,0.1-1.5,0.2L4.8,2.1C4.3,2.3,3.8,2.6,3.4,3L1.5,2.3C0.8,3,0.3,3.9,0,4.9l1.5,1.3
          c0,0.3-0.1,0.6-0.1,0.9c0,0.3,0,0.6,0.1,0.9L0,9.1c0.3,1,0.8,1.9,1.5,2.6L3.4,11c0.4,0.4,0.9,0.7,1.5,0.9l0.3,1.9
          c0.5,0.1,1,0.2,1.5,0.2c0.5,0,1-0.1,1.5-0.2l0.3-1.9c0.5-0.2,1-0.5,1.5-0.9l1.8,0.7c0.7-0.7,1.2-1.6,1.5-2.6l-1.5-1.3
          C11.9,7.6,11.9,7.3,11.9,7z M6.7,9.6C5.2,9.6,4,8.5,4,7c0-1.5,1.2-2.6,2.6-2.6c1.5,0,2.6,1.2,2.6,2.6C9.3,8.5,8.1,9.6,6.7,9.6z"/>
        </svg>
      </span>
    </div>
  </a>
  
  <a href="#" class="btn">
    Contact
    <div class="right">
      <svg x="0px" y="0px" viewBox="0 0 9 14" xml:space="preserve">
        <polygon fill="#FFFFFF" points="9,7 2,14 0,12 5,7 0,2 2,0 "/>
      </svg>
      <span class="before">
      </span>
      <span class="after">
        <svg x="0px" y="0px" viewBox="0 0 14 13" xml:space="preserve">
        <polygon fill="#FFFFFF" points="3,13 6,10 14,10 14,0 0,0 0,10 3,10 "/>
        </svg>
      </span>
    </div>
  </a>

</div>

css

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxIIzc.ttf) format('truetype');
}
body {
  background: #daf1fe;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
}
div.display {
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}
a.btn {
  background: #78a7c0;
  color: #fff;
  display: block;
  padding: 16px 30px;
  position: relative;
  text-decoration: none;
  width: 200px;
  z-index: 5;
}
a.btn div.right {
  background: #5590b0;
  height: 100%;
  -webkit-perspective: 500;
  -ms-perspective: 500;
  perspective: 500;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}
a.btn div.right span.before {
  background: #78a7c0;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  -webkit-transform-origin: left;
          transform-origin: left;
  top: 0;
  width: 50px;
  transition: all 0.15s linear;
  z-index: 10;
}
a.btn div.right span.after {
  background: #78a7c0;
  content: "";
  display: block;
  height: 100%;
  right: 0;
  position: absolute;
  -webkit-transform-origin: right;
          transform-origin: right;
  top: 0;
  width: 50px;
  transition: all 0.15s linear;
  z-index: 10;
}
a.btn div.right svg {
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 14px;
}
a.btn div.right > svg {
  transition: all 0.15s linear;
  right: 40px;
  z-index: 5;
}
a.btn.hover,
a.btn:hover {
  z-index: 10;
}
a.btn.hover div.right span.before,
a.btn:hover div.right span.before {
  background: #6a9eba;
  -webkit-transform: rotateY(-55deg);
          transform: rotateY(-55deg);
}
a.btn.hover div.right span.after,
a.btn:hover div.right span.after {
  background: #86b0c6;
  right: 43px;
  -webkit-transform: rotateY(55deg);
          transform: rotateY(55deg);
}
a.btn.hover div.right > svg,
a.btn:hover div.right > svg {
  right: 15px;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg