利用CSS3實現紙飛機飛行404動畫特效



16 63 22



特效描述:利用CSS3實現 紙飛機 飛行404 動畫特效,利用CSS3實現紙飛機飛行404動畫特效

代碼結構

1. HTML代碼

<div class="container container-star">
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
</div>
<div class="container container-bird">
  <div class="bird bird-anim">
    <div class="bird-container">
      <div class="wing wing-left">
        <div class="wing-left-top"></div>
      </div>
      <div class="wing wing-right">
        <div class="wing-right-top"></div>
      </div>
    </div>
  </div>
  <div class="bird bird-anim">
    <div class="bird-container">
      <div class="wing wing-left">
        <div class="wing-left-top"></div>
      </div>
      <div class="wing wing-right">
        <div class="wing-right-top"></div>
      </div>
    </div>
  </div>
  <div class="bird bird-anim">
    <div class="bird-container">
      <div class="wing wing-left">
        <div class="wing-left-top"></div>
      </div>
      <div class="wing wing-right">
        <div class="wing-right-top"></div>
      </div>
    </div>
  </div>
  <div class="bird bird-anim">
    <div class="bird-container">
      <div class="wing wing-left">
        <div class="wing-left-top"></div>
      </div>
      <div class="wing wing-right">
        <div class="wing-right-top"></div>
      </div>
    </div>
  </div>
  <div class="bird bird-anim">
    <div class="bird-container">
      <div class="wing wing-left">
        <div class="wing-left-top"></div>
      </div>
      <div class="wing wing-right">
        <div class="wing-right-top"></div>
      </div>
    </div>
  </div>
  <div class="bird bird-anim">
    <div class="bird-container">
      <div class="wing wing-left">
        <div class="wing-left-top"></div>
      </div>
      <div class="wing wing-right">
        <div class="wing-right-top"></div>
      </div>
    </div>
  </div>
  <div class="container-title">
    <div class="title">
      <div class="number">4</div>
      <div class="moon">
        <div class="face">
          <div class="mouth"></div>
          <div class="eyes">
            <div class="eye-left"></div>
            <div class="eye-right"></div>
          </div>
        </div>
      </div>
      <div class="number">4</div>
    </div>
    <div class="subtitle">哎呀。看來你拐錯彎了。</div>
    <button>返回</button>
  </div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子 棒球比分雪缘mlb 安徽地方麻将下载 湖北30选5开奖号码查询今天 体彩p5综合版走势图 欧美a片电影下载 长沙麻将技巧大全图 东北麻将技巧必胜 三分pk10是什么彩票 东莞特殊服务 开元棋牌官网 东北麻将规则 内蒙古11选5前三走势图 日本AV一边做一边哭 股票如何开盘竞价 白城棋牌游戏 重庆快乐10分走势图快