0
点赞
收藏
分享

微信扫一扫

微信小程序--转子加载动画


效果展示

微信小程序--转子加载动画_微信小程序

Demo代码

index.wxml

<view class="box">
<view class="loading">
<view class="title">HaihongPro</view>
</view>
</view>

index.json

{
"usingComponents": {}
}

index.js

Page({

/**
* 页面的初始数据
*/
data: {

},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {

},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})

index.wxss

.box{
margin: 0; /* 外边距 */
padding: 0; /* 内边距 */
background: #6c5ce7; /* 背景颜色 */
height: 100vh; /* 高度 */
display: flex; /* 弹性盒模型 */
align-items: center; /* 交叉轴对齐方式 */
justify-content: center; /* 主轴对齐方式 */
font-family: "montserrat",sans-serif; /* 字体 */
}

.loading{
width: 200px;
height: 200px;
box-sizing: border-box; /* 盒子大小规则 */
border-radius: 50%;
border-top: 10px solid #e74c3c;
position: relative; /* 相对定位 */
animation: a1 2s linear infinite; /* 动画:名称,时间,速率,重复 */
}

/* 边框 */
.loading::before,.loading::after{/* 之前,之后添加 */
content: ''; /* 内容 */
width: 200px;
height: 200px;
position: absolute; /* 绝对定位 */
.
.
.

.
.
.

.
.
.

.
.
.
完整代码




举报

相关推荐

0 条评论