微信小程式之實現載入動畫的旋轉方塊案例效果(前端學習收藏夾必備)
阿新 • • 發佈:2020-12-13
技術標籤:小程式cssanimationcss3html小程式
文章目錄
一、案例效果一
1.1 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>
1.2 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 3s linear infinite;
}
@keyframes rotate{
to{
transform: rotate(360deg);
}
}
.loading .flour{
width: 32px;
height: 32px;
background-color: #00cec9;
margin: 4px;
animation: scale 1.5s linear infinite;
}
@keyframes scale{
50%{
transform: scale(1.2);
}
}
二、案例效果二
2.1 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>
2.2 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;
animation: scale 2s linear infinite;
}
.loading .flour_2{
width: 32px;
height: 32px;
background-color: #2ecc71;
margin: 4px;
animation: scale 2s linear infinite;
}
.loading .flour_3{
width: 32px;
height: 32px;
background-color: #00cec9;
margin: 4px;
animation: scale 2s linear infinite;
}
.loading .flour_4{
width: 32px;
height: 32px;
background-color: #f1c40f;
margin: 4px;
animation: scale 2s linear infinite;
}
@keyframes scale{
50%{
transform: scale(1.2);
}
}
三、Animation說明
屬性 | 描述 |
---|---|
@keyframes | 規定動畫 |
animation | 所有動畫屬性的簡寫屬性,除了 animation-play-state 屬性 |
animation-name | 規定 @keyframes 動畫的名稱 |
animation-duration | 規定動畫完成一個週期所花費的秒或毫秒 |
animation-timing-function | 規定動畫的速度曲線 |
animation-delay | 規定動畫何時開始 |
animation-iteration-count | 規定動畫被播放的次數 |
animation-direction | 規定動畫是否在下一週期逆向地播放 |
animation-play-state | 規定動畫是否正在執行或暫停 |
animation-fill-mode | 規定物件動畫時間之外的狀態 |