css寫的小程式載入動畫

阿新 • • 發佈：2019-01-15

先來效果圖

wxml部分

<view class="line-spin-fade-loader">
  <view wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12]}}"></view>
</view>

wxss部分

@-webkit-keyframes line-spin-fade-loader {
  50% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}

@keyframes line-spin-fade-loader {
  50% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}

.line-spin-fade-loader {
  position: relative;
  top: 250rpx;
  left: 50%; 
  transform: scale(4,4);
}

.line-spin-fade-loader > view:nth-child(1) {
top:25rpx;
left:0;
-webkit-animation:line-spin-fade-loader 1.8s -1.32s infinite ease-in-out;
animation:line-spin-fade-loader 1.8s -1.32s infinite ease-in-out;

}

.line-spin-fade-loader > view:nth-child(2) {
top:21.6506rpx;
left:12.5rpx;
-webkit-transform:rotate(-30deg);
transform:rotate(-30deg);
-webkit-animation:line-spin-fade-loader 1.8s -1.2s infinite ease-in-out;
animation:line-spin-fade-loader 1.8s -1.2s infinite ease-in-out;

}

.line-spin-fade-loader > view:nth-child(3) {
top:12.5rpx;
left:21.6506rpx;
-webkit-transform:rotate(-60deg);
transform:rotate(-60deg);
-webkit-animation:line-spin-fade-loader 1.8s -1.08s infinite ease-in-out;
animation:line-spin-fade-loader 1.8s -1.08s infinite ease-in-out;

}

.line-spin-fade-loader > view:nth-child(4) {
top:0;
left:25rpx;
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-animation:line-spin-fade-loader 1.8s -0.96s infinite ease-in-out;
animation:line-spin-fade-loader 1.8s -0.96s infinite ease-in-out;

}

.line-spin-fade-loader > view:nth-child(5) {
top:-12.5rpx;
left:21.6506rpx;
-webkit-transform:rotate(60deg);
transform:rotate(60deg);
-webkit-animation:line-spin-fade-loader 1.8s -0.84s infinite ease-in-out;
animation:line-spin-fade-loader 1.8s -0.84s infinite ease-in-out;

}

.line-spin-fade-loader > view:nth-child(6) {
top:-21.6506rpx;
left:12.5rpx;
-webkit-transform:rotate(30deg);
transform:rotate(30deg);
-webkit-animation:line-spin-fade-loader 1.8s -0.72s infinite ease-in-out;
animation:line-spin-fade-loader 1.8s -0.72s infinite ease-in-out;

}

.line-spin-fade-loader > view:nth-child(7) {
  top:-25rpx;
  left:0;
  -webkit-animation:line-spin-fade-loader 1.8s -0.6s infinite ease-in-out;
  animation:line-spin-fade-loader 1.8s -0.6s infinite ease-in-out;
}

.line-spin-fade-loader > view:nth-child(8) {
top:-21.6506rpx;
left:-12.5rpx;
-webkit-transform:rotate(-30deg);
transform:rotate(-30deg);
-webkit-animation:line-spin-fade-loader 1.8s -0.48s infinite ease-in-out;
animation:line-spin-fade-loader 1.8s -0.48s infinite ease-in-out;
}

.line-spin-fade-loader > view:nth-child(9) {
top:-12.5rpx;
left:-21.6506rpx;
-webkit-transform:rotate(-60deg);
transform:rotate(-60deg);
-webkit-animation:line-spin-fade-loader 1.8s -0.36s infinite ease-in-out;
animation:line-spin-fade-loader 1.8s -0.36s infinite ease-in-out;

}

.line-spin-fade-loader > view:nth-child(10) {
top:0;
left:-25rpx;
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-animation:line-spin-fade-loader 1.8s -0.24s infinite ease-in-out;
animation:line-spin-fade-loader 1.8s -0.24s infinite ease-in-out;

}

.line-spin-fade-loader > view:nth-child(11) {
top:12.5rpx;
left:-21.6506rpx;
-webkit-transform:rotate(60deg);
transform:rotate(60deg);
-webkit-animation:line-spin-fade-loader 1.8s -0.12s infinite ease-in-out;
animation:line-spin-fade-loader 1.8s -0.12s infinite ease-in-out;
}

.line-spin-fade-loader > view:nth-child(12) {
  top:21.6506rpx;
  left:-12.5rpx;
  -webkit-transform:rotate(30deg);
  transform:rotate(30deg);
  -webkit-animation:line-spin-fade-loader 1.8s 0s infinite ease-in-out;
  animation:line-spin-fade-loader 1.8s 0s infinite ease-in-out;
}

.line-spin-fade-loader > view {
  background-color: #fff;
  border-radius: 2rpx;
  margin: 2rpx;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  width: 5rpx;
  height: 15rpx; 
}

css寫的小程式載入動畫

先來效果圖wxml部分<view class="line-spin-fade-loader"> <view wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12]}}"></view> </view>w

wepy寫小程式

wepy文件 https://tencent.github.io/wepy/document.html#/ 開始 wepy init standard myproject ——>npm install安裝node包——>wepy build –watch現在出現dist目錄

使用iview weapp元件寫小程式 tab切換

wxml： <i-row class="tab_question"><i-col span="24" i-class="col-class"><i-tabs current="{{ current }}" color="#f759ab" bindchange

從零開始寫小程式啟動介面

我們建立微信小程式都是有預設的啟動介面的,我現在把它預設的檔案都刪除了,因為是新手麼,所以想自己練練,然後我們要建立app.js ,app.json,app.wxss這三個配置檔案然後點選對應的,建立檔案就可以了比如我新建瞭如下專案結構：然後我們在welocme.w

微信小程式中動畫多次呼叫的問題

function hideMsg(that) { var animation = wx.createAnimation({ duration: 1500, timingFunction: 'linear', }) that.animation = animation

微信小程式之動畫 —— 自定義底部彈出層

wxml： <view class='buy' bindtap='showBuyModal'>立即購買</view>  <view class="cover_screen" bindtap="hideBuyModal"

寫小程式的一些小坑

1.關於資料繫結的問題　　小程式更新data後只是把資料的值更新，不會重新整理頁面，比如滑動的列表不會回到頂部，導致使用swiper有個小bug：　　　　就是swiper的資料是後臺請求的，可通過切換tab標籤動態獲取，如果在切換之前swiper處在第三張或者更多（比將要點選的tab下的swiper多

小程式載入svg圖片

前言小程式的元件中是沒有支援SVG標籤的。但是在前端小夥伴的實際開發中，UED經常提供SVG圖片過來，如果不想用引入iconfont的話，那麼妹子我將介紹個很好用的方法。 SVG 簡介 SVG 指可伸縮向量圖形 (Scalable Vector Graphics

小程式旋轉動畫

做了一個簡單的小程式箭頭旋轉動畫效果。 <view class='clist fs26' bindtap='godet'> <view> 專案名稱：萌卡納</view> <view class='f-r '>

小程式載入更多

寫了一個小程式載入更多的模板，可以是點選事件，也可以是下拉到螢幕底部事件，自己設定。因為是偽資料，所以有點不一樣自己也可以想想怎麼實現， .body{ width: 100%; min-height: 100vh; background-color: #4C5268; }

微信小程式：動畫（Animation）

簡單總結一下微信動畫的實現及執行步驟。一、實現方式官方文件是這樣說的：①建立一個動畫例項 animation。②呼叫例項的方法來描述動畫。③最後通過動畫例項的 export 方法匯出動畫資料傳遞給元件的 animation 屬性。因為小程式是資料驅動

微信小程式開發——動畫效果

<view style='width:60px;height:60px;background-color:yellow;' animation="{{moveData}}" bindtap='moveClick'>移動</view> <view st

微信小程式載入 HTML 標籤

最近寫專案中遇到一個問題，後臺介面返回資料時有html標籤，小程式如何載入html標籤格式的字串呢？小程式有跳轉外連線的功能可以直接跳轉到一個h5頁面。具體使用方法如下：官方文件 1.先登入小程式開發平臺，將頁面需要跳轉的域名寫上去，注意了，域名不是指伺服器

用java寫小程式--輸出考試成績的前三名

要求： 1、考試成績已儲存在陣列 scores 中，陣列元素依次為 89 , -23 , 64 , 91 , 119 , 52 , 73 2、要求通過自定義方法來實現成績排名並輸出操作，將成績陣列作為引數傳入 3、要求判斷成績的有效性（ 0—100

幫小朋友參加寫小程式比賽的總結

最近還是挺忙的，由於要幫小朋友參加比賽，導致我需要儘量早回家，╮(╯▽╰)╭，就算這樣時間也不多，本來就比較緊張，又要工作，所以總共花了這些時間寫了一個非常簡單的小程式，內容麼，沒有具體要求，本來我也不認識小朋友，只是別人拜託的，所以看了看大致的要求，一開始打算寫個俄羅斯方塊

用wxDraw.js製作酷炫的小程式canvas動畫『wxDraw 小程式界的zrender』

wxDraw輕量的小程式canvas動畫庫是什麼canvas 是HTML5的一個重要元素，它能夠高效的繪製圖形，但是過於底層，且粗糙的Api，導致開發者很難使用它來做較為複雜的圖形，而且它的即時繪製無記憶特性，使得它內部的圖形並不支援動畫更不支援一切互動事件。這樣的問題出現在所有支援canvas的客戶端上同

小程式使用動畫將picker-view模擬類似picker的效果 picker也可能造成appLaunch with an already exist webviewId報錯資訊

在小程式開發中，picker在許多地方會用到，但是可能不會滿足產品的要求，此時可以使用picker-view進行處理 js檔案中使用createAnimation建立動畫來做過度效果，當然也可以在css中加入動畫，不過我就要用js -。- // pages/myTime

【微信小程式】動畫實現字幕滾動

需求：實現框內的文字自下而上的自動迴圈滾動。解決方案：第一種方法：經查詢，最一開始實現字幕滾動是使用的微信小程式的swiper元件，後來發現，使用swiper元件實現的效果類似於輪播圖，不符合需求。 <swiper class="swiper_co

微信小程式載入和解析html標籤

小程式的頁面可以是使用wx的語法編寫的頁面，也可以是第三方html頁面，還可以是wx的頁面然後使用wxParse解析html的標籤最終構成小程式可以載入的wx頁面。今天用到了第三種。首先需要下載wxParse外掛，我生成了雲盤連結。下載之後解壓並放置在

mpvue小程式載入不出圖片 Failed to load local image resource /images/xx.png

mpvue開發小程式時候，要新增靜態本地圖片 <img src="../../images/bg.png" alt=""> 會報錯： VM14878:2 Failed to load local image resource /imag

css寫的小程式載入動畫

相關推薦