微信小程序align_微信小程序四色花瓣
生活随笔
收集整理的這篇文章主要介紹了
微信小程序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;
}
額外發(fā)現
微信小程序
居然已支持HTML寫法
測試
wxml
<body>????<div?class="loading-screen">
????????<div?class="loading">
????????????<span?class="flour"?>span>
????????????<span?class="flour"?>span>
????????????<span?class="flour"?>span>
????????????<span?class="flour"?>span>
????????div>
????div>
body>
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
- 下一篇： python生产脚本_生产级部署 Pyt