利用CSS3實現抽屜打開關閉動畫特效



19 74 25



特效描述:利用CSS3實現 抽屜打開 關閉動畫特效,利用CSS3實現抽屜打開關閉動畫特效

代碼結構

1. HTML代碼

<div class="chest">
  <div class="chest__panel chest__panel--back"></div>
  <div class="chest__panel chest__panel--front">
    <div class="chest__panel chest__panel--front-frame"></div>
  </div>
  <div class="chest__panel chest__panel--top"></div>
  <div class="chest__panel chest__panel--bottom"></div>
  <div class="chest__panel chest__panel--left"></div>
  <div class="chest__panel chest__panel--right"></div>
  <div class="chest-drawer chest-drawer--top">
    <details>
      <summary></summary>
    </details>
    <div class="chest-drawer__structure">
      <div class="chest-drawer__panel chest-drawer__panel--left"></div>
      <div class="chest-drawer__panel chest-drawer__panel--right"></div>
      <div class="chest-drawer__panel chest-drawer__panel--bottom"></div>
      <div class="chest-drawer__panel chest-drawer__panel--back">CSS</div>
    </div>
  </div>
  <div class="chest-drawer chest-drawer--middle">
    <details>
      <summary></summary>
    </details>
    <div class="chest-drawer__structure">
      <div class="chest-drawer__panel chest-drawer__panel--left"></div>
      <div class="chest-drawer__panel chest-drawer__panel--right"></div>
      <div class="chest-drawer__panel chest-drawer__panel--bottom"></div>
      <div class="chest-drawer__panel chest-drawer__panel--back">is</div>
    </div>
  </div>
  <div class="chest-drawer chest-drawer--bottom">
    <details>
      <summary></summary>
    </details>
    <div class="chest-drawer__structure">
      <div class="chest-drawer__panel chest-drawer__panel--left"></div>
      <div class="chest-drawer__panel chest-drawer__panel--right"></div>
      <div class="chest-drawer__panel chest-drawer__panel--bottom"></div>
      <div class="chest-drawer__panel chest-drawer__panel--back">Awesome</div>
    </div>
  </div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 加載動畫 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表