jQuery與CSS3超炫漢堡變形動畫特效-css教學-PHP中文網

jQuery與CSS3超炫漢堡變形動畫特效

黄舟

發布： 2017-01-18 14:04:21

原創

1601 人瀏覽過

簡要教學

這是一款使用jQuery和CSS3來製作的酷炫漢堡包變形動畫特效。此特效透過透過jQuery來附加按鈕事件，並透過CSS3 transform和animation來製作動畫特效。

使用方法

HTML結構

該漢堡包變形動畫特效的HTML結構如下：

<div class=&#39;container&#39;>
  <div class=&#39;burger&#39;>
    <div class=&#39;burger__line-top&#39;></div>
    <div class=&#39;burger__line-mid&#39;></div>
    <div class=&#39;burger__menu&#39;>
      <p>MENU</p>
    </div>
  </div>
</div>

登入後複製

CSS樣式

漢堡包款的基本樣式符號activeMid、activeMenu、reverseTop、reverseMid和reverseMenu。分別用於漢堡包按鈕的變形和返回初始狀態。

JavaScript

該特效使用jQuery程式碼來為對應的元素添加和移除對應的class類，並為漢堡包按鈕綁定滑鼠點擊事件。

.burger {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 71px;
  height: 71px;
  cursor: pointer;
}
.burger__line-top {
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 1px 0 #fff;
}
.burger__line-mid {
  margin-top: 17px;
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 1px 0 #fff;
}
.burger__menu {
  margin-top: 10px;
}
.burger__menu p {
  text-align: center;
  font-size: 20px;
  font-family: &#39;Open Sans&#39;, sans-serif;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 1px #fff;
  letter-spacing: 3px;
}

登入後複製

以上就是jQuery和CSS3超炫漢堡包變形動畫特效的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！