效果展示
微信小程序--加載動(dòng)畫(huà)（旋轉(zhuǎn)方塊）.gif
Demo代碼
wxml
<view class="loading-screen">
<view class="loading">
<view class="flour" ></view>
<view class="flour" ></view>
<view class="flour" ></view>
<view class="flour" ></view>
</view>
</view>
wxss
page{
margin: 0;
padding: 0;
}
.loading-screen{
width: 100%;
height: 100vh;
background-color: #2e2e2e;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
}
.loading{
width: 80px;
display: flex;
flex-wrap: wrap;
.
.
.
完整源碼獲取
微信公眾號(hào)：海轟Pro
回復(fù)：簡(jiǎn)書(shū)
效果展示（改進(jìn)）
微信小程序--加載動(dòng)畫(huà)（旋轉(zhuǎn)方塊2）.gif
Demo代碼
wxml
<view class="loading-screen">
<view class="loading">
<view class="flour_1" ></view>
<view class="flour_2" ></view>
<view class="flour_3" ></view>
<view class="flour_4" ></view>
</view>
</view>
wxss
page{
margin: 0;
padding: 0;
}
.loading-screen{
width: 100%;
height: 100vh;
background-color: #2e2e2e;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
}
.loading{
width: 80px;
display: flex;
flex-wrap: wrap;
animation: rotate 4s linear infinite;
}
@keyframes rotate{
to{
transform: rotate(360deg);
}
}
/* 四色版本 */
.loading .flour_1{
width: 32px;
height: 32px;
background-color: #eb4d4b;
margin: 4px;
.
.
.
完整源碼獲取
微信公眾號(hào)：海轟Pro
回復(fù)：簡(jiǎn)書(shū)
