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

编程问答

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

发布时间：2025/4/5 编程问答 31 豆豆

生活随笔收集整理的这篇文章主要介绍了微信小程序align_微信小程序四色花瓣小编觉得挺不错的,现在分享给大家,帮大家做个参考.

效果展示

Demo代码

wxml

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如