豐富您設計的10個CSS3效果庫

jopen 10年前發布 | 23K 次閱讀 CSS3

Magic CSS3 Animations

Magic CSS3 Animations是一個CSS3動畫包,擁有一些特效可以你的Web項目中免費使用。擁有像金光閃閃,角度,旋轉,炸彈等特殊效果。使用簡單,大部分的動畫是跨瀏覽器兼容。



Animate.css

Animate.css是一個現成的CSS3的動畫特效庫。這個庫擁有60個不同的動畫效果。Once animate.min.css is included into your <head> document, you just need to add the animated class plus the name of the needed animation. Example with the Flash animation, the element class would be: class="animated flash".



Liffect

liffect是一個在線的列表動畫生成工具,能夠幫助你針對一個ul列表來生成動畫效果,你可能會經常的看到如下的動畫類型:

  • fadeIn
  • zoomIn
  • zoomOut
  • slideTop
  • slideDown
  • pageTop
  • pageRight
  • ...
  • </ul>

    所有的以上動畫特效,都可以使用liffect輕松的生成。這個工具依賴jQuery和CSS3的動畫來生成以上所有的特效。最重要的是能夠根據你的特效選擇自動生成HTML,CSS和javascript代碼。而且提供了其它的選項來有效的控制動畫,例如,延遲,CSS前綴等等。相信你能更加精細的控制動畫的效果。

     
    Effeckt.css

    EFFECKT.CSS是一個集合了眾多新鮮而又實用的的CSS/jQuery動畫效果,這些都適用于網站或是移動APP的網頁,比如一些AJAX彈出框動畫、菜單動畫、圖片標題展示等等,這些特效動畫都能給你的網站提升一定用戶體驗,而且簡單實用。
    Read the 9 goals of Effeckt.css and watch the project’s 22-second video on 油Tube to get a glimpse of Effeckt.css’s might bring int the future.

     

    Animatable

    該工具用于創建CSS3動畫,創建的動畫可以在任何平臺或設備(包括Android、BlackBerry、iOS 和WebOS等)中的現代瀏覽器中運行。即便你不熟悉CSS,該工具也能幫助你創建多場景的CSS3動畫。


    Fancy Input

    Fancy Input 這款 jQuery  插件不只是關注外觀,同時在交互方面通過 CSS3 特性讓文本輸入域變得更有趣,更有吸引力。

     


    Morf.js

    Morf.js 提供了一組 JavaScript 方法用于加速 CSS3 的各種轉換效果,支持的方法都在上圖中,無需編寫 CSS3 代碼。

     


    Easing Functions

    Easing functions is something different from the reset. It's a generator to create different easing transition. You can specifies the speed of animation progresses to make it more realistic. You will get a CSS version too if it's possible to make it with CSS, otherwise, you will get a javascript version.


    Hover.css

    Hover.css 是一個利用CSS3創建動畫鼠標懸停效果的集合。適用于任何Html元素,如按鈕,圖像等。
    所有Hover.css效果利用一個單一的元素(在必要的一些偽元素的幫助),是自包含的,因此您可以輕松地復制和粘貼。



    CSS3 Animations Plugin

    CSS3 Animations plugin uses the great new features in CSS3 especially Animations. This plugin can animate your site with minimal effort. Just choose the animation effect what you like /you can choosey 35 different animations / and use it in your element in CSS. Animation may take place during a hover on an element of the mouse to display or hide elements but can run as from the beginning. It is up to you when the animation makes.
    There are two different versions - Development (72kb in size) and a Minified (45kb in size) version.

     本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
     轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
     本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!