<p id="l55vn"></p>
<nobr id="l55vn"></nobr>
<menuitem id="l55vn"><delect id="l55vn"><i id="l55vn"></i></delect></menuitem>

<p id="l55vn"></p>
      <nobr id="l55vn"><thead id="l55vn"><i id="l55vn"></i></thead></nobr>
      <b id="l55vn"></b>

            <menuitem id="l55vn"></menuitem>
              <nobr id="l55vn"><ruby id="l55vn"><i id="l55vn"></i></ruby></nobr>

              首頁 > 設計 > WEB標準 > 正文

              10個頂級的CSS和Javascript動畫框架

              2018-10-16 20:54:27
              字體:
              來源:轉載
              供稿:網友

              在網站中嵌入動畫已成為近年來的一個設計趨勢,許多公司都已開始轉向并擁抱HTML5、CSS3和JavaScript這個技術“三人組”。盡管這些技術還不能制作一些非常復雜的動畫(像flash所實現的),但是如果擁有好的想法及創造性思維,使用它們制作的即便是一些簡單的動畫也足以打動我們。

                而且,隨著CSS3技術的發展,CSS3動畫日益流行。目前,WebKit瀏覽器已對CSS3動畫支持得相當好。Firefox已經打算采用Webkit代碼,IE 10中也會加入Webkit支持。

                本文介紹一些JavaScript和CSS動畫框架,個人認為相當實用,希望它們能幫助你創建出令人著迷的用戶體驗。

              1.

              該jQuery插件擴展了jQuery的動畫功能,增加了許多CSS3特性,如rotata(旋轉)、skew(扭曲)、scale(縮放)等。

              2.

              這也是一個jQuery插件,不過它擴展的是animate()與css()方法的功能。通過其引入的CSS3屬性你可以完成一系列的動畫效果。

              3.

              Paper.js是一個的矢量圖形腳本框架,運行于HTML5 Canvas(畫布)之上。它提供了一個整潔的場景圖(Scene Graph)或文檔對象模型來創建矢量圖形,并且擁有許多強大的功能,可以生成貝賽爾曲線等。所有這一切都通過一個精心設計的整潔一致的編程接口封裝了起來。

              4.

              Move.js是一個小巧的JavaScript庫,可以創建非常簡單而優雅的CSS3動畫。

              5.

              jsAnim是一個強大卻易于使用的JavaScript庫,絕對可以讓你創建令人驚嘆的動畫效果,而不會影響項目的可用性。它只有不到25KB,但卻非常強大。

              6.

              GX是一個功能完善的、跨瀏覽器的超輕量級(未壓縮狀態下只有10KB)JavaScript動畫框架。使用GX框架,你可以利用所有的W3C CSS屬性來創建復雜動畫效果。

              7.

              純粹的CSS3動畫方案。這里有一個demo,你可以看見使用它能實現么樣的動畫效果。

              8.

              Animate.css是一個可直接用于項目的有趣的、跨瀏覽器動畫方案,包括一個純粹的CSS3動畫庫及一些預定義的動畫片段。

              9.

              一個輕量級的JavaScirpt動畫庫,對JavaScript DOM函數進行了擴展。它體積很?。ㄖ挥?.7KB)——健壯的實現,較低的學習成本,總之$fx是一個不錯的選擇。

              10.

              Scripty2是一個強大靈活的JavaScript框架,可以讓你編寫屬于自己的“可視化大餐”或者令人深刻的用戶界面。它是Flash的競爭對手。

              發表評論 共有條評論
              用戶名: 密碼:
              驗證碼: 匿名發表
              a级情欲片在线观看免费
              <p id="l55vn"></p>
              <nobr id="l55vn"></nobr>
              <menuitem id="l55vn"><delect id="l55vn"><i id="l55vn"></i></delect></menuitem>

              <p id="l55vn"></p>
                  <nobr id="l55vn"><thead id="l55vn"><i id="l55vn"></i></thead></nobr>
                  <b id="l55vn"></b>

                        <menuitem id="l55vn"></menuitem>
                          <nobr id="l55vn"><ruby id="l55vn"><i id="l55vn"></i></ruby></nobr>