微信小程序之实现加载动画的旋转方块案例效果（前端学习收藏夹必备）

文章目录

一、案例效果一
- 1.1 WXML代码：
- 1.2 WXSS代码
二、案例效果二
- 2.1 WXML代码
- 2.2 WXSS代码
三、Animation说明

一、案例效果一

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	规定对象动画时间之外的状态

微信小程序之实现加载动画的旋转方块案例效果（前端学习收藏夹必备）相关推荐

【微信小程序】自定义加载动画3
目录效果图配置版本1 版本2 结语效果图配置配置方法参考上一篇文章:[微信小程序]自定义加载动画版本1 Component({behaviors
【微信小程序】自定义加载动画4
目录效果图配置文件结语效果图配置文件配置方法参考上一篇文章:[微信小程序]自定义加载动画组件源代码: Component({behaviors: [],properties: {
【微信小程序】自定义加载动画
前言在编写微信小程序的代码时,我们会发现:原生加载动画样式不多,可供我们设置的参数也不多. 通过查询可以得知,若是需要自己定义加载动画,一般的做法就是:在当前页面写加载动画的view代 ...
微信小程序自定义loading加载动画（2）
1.实现效果 2.实现原理 animation 3.实现代码 <view class="loading-row"><view class="loadin ...
微信小程序--七彩爱心加载动画
效果展示 Demo代码 index.wxml <view id="he"><view class="box"><view clas ...
微信小程序之实现层叠轮播图的效果案例（前端学习收藏夹必备）
效果展示代码展示: WXML代码 <view class="selection_cards" bindtouchstart="touchstart" b ...
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
微信小程序之下拉加载和上拉刷新
微信小程序之下拉加载和上拉刷新微信小程序下拉加载和上拉刷新两种实现方法方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新首先要在json文件里 ...
Android 仿微信小程序开屏页加载loading
Android 仿微信小程序开屏页加载loading 废话不多说,先上效果图~ 首先就是底层有一个灰色的圆,然后按照圆形的轨迹进行绘制. 啊~说那么多也没用,还是直接上代码吧,哈哈哈哈绘制底部圆形及 ...
微信小程序封装懒加载图片
微信小程序封装懒加载图片 js /components/LazyImage/index.js // components/LazyImage/index.js Component({/*** 组件的属 ...

微信小程序之实现加载动画的旋转方块案例效果（前端学习收藏夹必备）

文章目录

一、案例效果一

1.1 WXML代码：

1.2 WXSS代码

二、案例效果二

2.1 WXML代码

2.2 WXSS代码

三、Animation说明

微信小程序之实现加载动画的旋转方块案例效果（前端学习收藏夹必备）相关推荐

最新文章

热门文章