當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

微信小程序align_微信小程序四色花瓣

發布時間：2025/4/5 编程问答 18 豆豆

生活随笔收集整理的這篇文章主要介紹了微信小程序align_微信小程序四色花瓣小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

效果展示

Demo代碼

wxml

????<view?class="loading-screen">
????????<view?class="loading">
????????????<view?class="a?flour"?>view>
????????????<view?class="a?flour"?>view>
????????????<view?class="a?flour"?>view>
????????????<view?class="a?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;
??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);
??}
}
.loading?.a:nth-child(1){
??border-radius:?50%?50%?0?50%;
??background-color:?#e17055;
??transform-origin:?bottom?right;
}

.loading?.a:nth-child(2){
??border-radius:?50%?50%?50%?0;
??background-color:?#fdcb6e;
??transform-origin:?bottom?left;
??animation-delay:?.5s;
}

.loading?.a:nth-child(3){
??border-radius:?50%?0?50%?50%;
??background-color:?#00cec9;
??transform-origin:?top?right;
??animation-delay:?1.5s;
}

.loading?.a:nth-child(4){
??border-radius:?0?50%?50%?50%;
??background-color:?#6c5ce7;
??transform-origin:?top?left;
??animation-delay:?1s;
}

額外發現

微信小程序

居然已支持HTML寫法

測試

wxml

wxss

*{
????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);
????}
}

.loading?span:nth-child(1){
????border-radius:?50%?50%?0?50%;
????background-color:?#e77f67;
????transform-origin:?bottom?right;
}

.loading?span:nth-child(2){
????border-radius:?50%?50%?50%?0;
????background-color:?#778beb;
????transform-origin:?bottom?left;
????animation-delay:?.5s;
}

.loading?span:nth-child(3){
????border-radius:?50%?0?50%?50%;
????background-color:?#f8a5c2;
????transform-origin:?top?right;
????animation-delay:?1.5s;
}

.loading?span:nth-child(4){
????border-radius:?0?50%?50%?50%;
????background-color:?#f5cd79;
????transform-origin:?top?left;
????animation-delay:?1s;
}

報錯

修改

將 “ * ” 修改為 “page”

修改后：

page{
??margin:?0;
??padding:?0;
}
...

結果：正常運行?

說明

學習于 https://www.youtube.com/

Demo代碼已同步至小程序

寫留言｜查看留言

總結

以上是生活随笔為你收集整理的微信小程序align_微信小程序四色花瓣的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： echarts 弹出放大_echarts
下一篇：红米note5解锁教程_红米NOTE5如