效果展示

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

<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_微信小程序四色花瓣相关推荐

微信小程序--四色花瓣
效果展示 Demo代码 wxml <view class="loading-screen"><view class="loading"> ...
Web前端学习笔记（十五）---四色花瓣
效果展示 Demo代码 HTML CSS 学习于:YouTube 代码获取如下
微信小程序教学第三章第四节（含视频）：小程序中级实战教程：下拉更新、分享、阅读标识...
为什么80%的码农都做不了架构师?>>> 下拉更新.分享.阅读标识本文配套视频地址: https://v.qq.com/x/page/h0554i4u5ob.html 开始前 ...
获取this_小程序获取微信运动步数并集成echarts报表显示
需求现在运动计步非常的火,大家常用的计步工具一般有keep.咕咚.微信运动和其他移动设备等,本文是基于微信小程序获取用户的微信运动数据并可视化呈现出来. 先看一下最终实现效果: 微信运动规则在开发 ...
JAVA版开源微信管家—JeeWx捷微3.1小程序版本发布，支持微信公众号，微信企业号，支付窗
支持小程序,JeeWx捷微3.1小程序版本发布^_^ JeeWx捷微V3.1--多触点小程序版本管理平台(支持微信公众号,微信企业号,支付窗) JeeWx捷微V3.1.0版本紧跟微信小程序更新,在原有 ...
微信小程序-通知滚动小提示
代码地址如下: http://www.demodashi.com/demo/14044.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
mysql传数据到微信小程序_微信小程序直播数据同步与转存
本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 本教程所用项目框架为egg ...
新版微信不停跳转到小程序_如何设置跳转微信小程序
一.功能效果手机网站常用模块:文本.图片.按钮支持设置点击跳转微信小程序. 可实现手机微信端下,打开手机网站可与微信小程序的实现相互跳转. 二.注意事项 [版本]展示中级版及以上版本支持开通. [条 ...
webstorm下载微信小程序插件_微信电脑版可以打开小程序喽前提你得下载测试版...
据微信开发者团队消息最新推出的小程序开发套件已经支持开发者面向电脑版微信测试微信小程序相关功能. 开发者下载新版本开发套件即可针对电脑版微信进行小程序调试,不过似乎也没有什么需要特别调试的地方. 既然 ...

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

效果展示

Demo代码

wxml

wxss

额外发现

测试

wxml

wxss

报错

修改

结果：正常运行✅

说明

微信小程序align_微信小程序四色花瓣相关推荐

最新文章

热门文章