微信小程序中使用wxss加載圖片并實現(xiàn)動畫效果
更新時間：2018年08月13日 10:20:20 投稿：mrr
記錄微信小程序中使用wxss加載圖片并實現(xiàn)動畫的方式，最終實現(xiàn)loading效果。本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧
記錄微信小程序中使用wxss加載圖片并實現(xiàn)動畫的方式，最終實現(xiàn)loading效果。
代碼
.weui-loading {
margin: 0 5px;
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
animation: a 1s steps(12) infinite;
background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
background-size: 100%;
background-image: '../../resources/icon_api.png';
}
@keyframes a {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
說明
- @keyframes a
定義了動畫為旋轉(zhuǎn)動畫，1turn為旋轉(zhuǎn)一圈；
- animation 屬性
一個簡寫屬性，用于設(shè)置動畫屬性，steps為逐幀動畫；
- background
background中url傳入用于動畫的圖片，傳入的為圖片base64編碼，data:image/png;base64,為Data URI scheme，目的是將一些小的數(shù)據(jù)，直接嵌入到網(wǎng)頁中，從而不用再從外部文件載入。將這些字符復(fù)制黏貼到火狐的地址欄中并轉(zhuǎn)到，就能看到它了。
在上面的Data URI中，data表示取得數(shù)據(jù)的協(xié)定名稱，image/png 是數(shù)據(jù)類型名稱，base64 是數(shù)據(jù)的編碼方法，逗號后面就是這個image/png文件base64編碼后的數(shù)據(jù)。
總結(jié)
以上所述是小編給大家介紹的微信小程序中使用wxss加載圖片并實現(xiàn)動畫效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
全面總結(jié)Javascript對數(shù)組對象的各種操作
最近有個同事問了個問題，關(guān)于數(shù)組，對象和類數(shù)組的，仔細(xì)說起來都是基礎(chǔ)，其實都沒什么好講的，不過看到還是有很多朋友有些迷糊，決定還是寫出來吧，下面這篇文章主要給大家介紹了Javascript對數(shù)組對象的各種操作,需要的朋友可以參考借鑒。2017-01-01
這篇文章主要介紹了js深拷貝與淺拷貝一文徹底搞懂,需要的朋友可以參考下2022-04-04
詳解js的延遲對象、跨域、模板引擎、彈出層、AJAX【附實例下載】
本篇文章主要介紹了JavaScript的延遲對象、跨域、模板引擎、彈出層、AJAX，對其進(jìn)行示例解析，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
JS字符串轉(zhuǎn)GBK編碼超精簡實現(xiàn)詳解
JS中GBK編碼轉(zhuǎn)字符串是非常簡單的，但反過來，字符串轉(zhuǎn)GBK編碼卻沒這么簡單。接下來本文就將帶大家一起康康JS如何實現(xiàn)字符串轉(zhuǎn)GBK編碼，需要的可以參考一下2022-08-08
JavaScript下利用fso判斷文件是否存在的代碼，需要的朋友可以參考下，這個一般需要運(yùn)行確認(rèn)的。2010-12-12
這篇文章主要介紹了JS查找數(shù)組中重復(fù)元素的方法,結(jié)合具體實例形式對比分析了javascript針對數(shù)組的遍歷、判斷、排序等相關(guān)操作技巧,需要的朋友可以參考下2017-06-06
javascript實現(xiàn)tabs選項卡切換效果(擴(kuò)展版)
常用的頁面效果有彈出層效果，無縫滾動效果，選項卡切換效果，接下來與大家分享一款自己用原生javascript寫的選項卡切換效果在原有的基礎(chǔ)上進(jìn)行了擴(kuò)展，加入了自動輪播，這樣就變成了類似圖片輪播的效果2013-03-03
這篇文章主要介紹了小程序登錄態(tài)和檢驗注冊過沒的app.js寫法, 本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細(xì)介紹了原生js滑動輪播封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
Javascript中關(guān)于Array.filter()的妙用詳解
大家應(yīng)該都知道filter是Javascript中Array常用的操作，它用于把Array的某些元素過濾掉，然后返回剩下的元素。下面這篇文章就給大家介紹了關(guān)于Javascript中Array.filter()的妙用，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12