建站
咨詢
售后
建站咨詢
新聞中心
過去，由于加載圖片的格式限制(只能使用GIF格式)，設計加載動畫不是那么容易。隨著技術和瀏覽器的發(fā)展，用 CSS3 和 jQuery 就可以方便地設計加載動畫，這種方式的高度可定制化以及服務器的進步使得開發(fā)者的各種要求得到滿足。下面介紹10個實用的方案。
創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網站設計、成都網站建設、企業(yè)官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯(lián)網時代的肅州網站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！
1. Sonic——循環(huán)的加載動畫
Sonic是一個很小的JS“類”，你可以用它來創(chuàng)建自定義加載動畫——蛇吞尾似的循環(huán)動畫。
源碼 / 演示
2. 閃爍的加載動畫
用 CSS3 動畫可以實現閃爍跳躍式的正在載入頁面效果。
源碼 / 演示
3. 旋轉的加載動畫(無需圖片)
CSS transform(Firefox 3.5+和基于Webkit的瀏覽器中可用)有很多有趣的功能，如旋轉、平移、縮放和傾斜等等都可以用來設計加載動畫。
源碼 + 演示
4. Ajax 風格的加載動畫(無需圖片)
圖片是網站中非常重要的部分，如果使用gif圖片作為加載動畫，則需要在載入網站圖片的同時先載入gif動畫圖片。如果使用 CSS，這種問題就迎刃而解了。因此推薦用 CSS3 來開發(fā) Ajax 風格的加載動畫。
源碼 / 演示
5. 圓圈風格的加載動畫
簡潔的 CSS3 代碼能生成動畫來顯示加載進度，在樣式類中修改寬度和高度值就可以設置圓圈的大小。
源碼 / 演示
6. Flickr風格的加載動畫
頁面加載時，兩個不同顏色的圓圈分別向左向右移動，之后再反向移動，一直重復循環(huán)。
源碼 / 演示
7. Canvas元素加載生成器
這是一個免費的在線工具，可以為HTML項目生成各種加載動畫，包含旋轉和閃爍的效果。
源碼 + 演示
8. CSS3 加載動畫
三個簡單的 CSS3 加載動畫，分別以圓點、線條、方格的形式呈現。
源碼 / 演示
9. CSS3 循環(huán)加載動畫
三個 CSS3 循環(huán)動畫，可以應用于許多領域，例如基于 jQuery 的圖像預載。
源碼 / 演示
10. 頁面加載——jQuery 插件
這個jQuery插件能夠在加載網頁的時候顯示加載進度視圖，還可以自定義一些參數來設置該視圖的顏色、加載圖標、背景圖片等等。
源碼 / 演示
原文：http://www.iteye.com/news/24390
網頁題目：10個基于CSS3/jQuery的加載動畫設計方案
網頁地址：http://www.5511xx.com/article/djsjdis.html
