您好,登錄后才能下訂單哦!
10個基于CSS3/jQuery的加載動畫設(shè)計方案分別是怎樣的,相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
過去,由于加載圖片的格式限制(只能使用GIF格式),設(shè)計加載動畫不是那么容易。隨著技術(shù)和瀏覽器的發(fā)展,用 CSS3 和 jQuery 就可以方便地設(shè)計加載動畫,這種方式的高度可定制化以及服務(wù)器的進步使得開發(fā)者的各種要求得到滿足。下面介紹10個實用的方案。
1. Sonic——循環(huán)的加載動畫
Sonic是一個很小的JS“類”,你可以用它來創(chuàng)建自定義加載動畫——蛇吞尾似的循環(huán)動畫。
源碼 / 演示
2. 閃爍的加載動畫
用 CSS3 動畫可以實現(xiàn)閃爍跳躍式的正在載入頁面效果。
源碼 / 演示
3. 旋轉(zhuǎn)的加載動畫(無需圖片)
CSS transform(Firefox 3.5+和基于Webkit的瀏覽器中可用)有很多有趣的功能,如旋轉(zhuǎn)、平移、縮放和傾斜等等都可以用來設(shè)計加載動畫。
源碼 + 演示
4. Ajax 風格的加載動畫(無需圖片)
圖片是網(wǎng)站中非常重要的部分,如果使用gif圖片作為加載動畫,則需要在載入網(wǎng)站圖片的同時先載入gif動畫圖片。如果使用 CSS,這種問題就迎刃而解了。因此推薦用 CSS3 來開發(fā) Ajax 風格的加載動畫。
源碼 / 演示
5. 圓圈風格的加載動畫
簡潔的 CSS3 代碼能生成動畫來顯示加載進度,在樣式類中修改寬度和高度值就可以設(shè)置圓圈的大小。
源碼 / 演示
6. Flickr風格的加載動畫
頁面加載時,兩個不同顏色的圓圈分別向左向右移動,之后再反向移動,一直重復循環(huán)。
源碼 / 演示
7. Canvas元素加載生成器
這是一個免費的在線工具,可以為HTML項目生成各種加載動畫,包含旋轉(zhuǎn)和閃爍的效果。
源碼 + 演示
8. CSS3 加載動畫
三個簡單的 CSS3 加載動畫,分別以圓點、線條、方格的形式呈現(xiàn)。
源碼 / 演示
9. CSS3 循環(huán)加載動畫
三個 CSS3 循環(huán)動畫,可以應用于許多領(lǐng)域,例如基于 jQuery 的圖像預載。
源碼 / 演示
10. 頁面加載——jQuery 插件
這個jQuery插件能夠在加載網(wǎng)頁的時候顯示加載進度視圖,還可以自定義一些參數(shù)來設(shè)置該視圖的顏色、加載圖標、背景圖片等等。
源碼 / 演示
看完上述內(nèi)容,你們掌握10個基于CSS3/jQuery的加載動畫設(shè)計方案分別是怎樣的的方法了嗎?如果還想學到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。