效果展示
Demo代码
index.wxml
<view class="box">
<view class="loading">
<view class="title">HaihongPro</view>
</view>
</view>
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; /* 绝对定位 */
left: 0;
top: -10px;
box-sizing: border-box;
border-radius: 50%;
}
.loading::before{
border-top: 10px solid #e67e22; /* 上边框 */
transform: rotate(120deg); /* 通过修改角度显示 */
}
.loading::after{
border-top: 10px solid #3498db;
transform: rotate(240deg);
}
.loading .title{
position: absolute;
width: 200px;
height: 200px;
color: #fff;
text-align: center;/* 字体水平居中 */
line-height: 200px; /* 行高 */
animation: a2 2s linear infinite;
}
@keyframes a1 {
to{
transform: rotate(360deg); /* 转动角度 */
}
}
@keyframes a2 {
to{
transform: rotate(-360deg);
}
}
index.json
{
"usingComponents": {}
}
index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
https://mp.weixin.qq.com/s/02ihZL1-XBIoEDJQoIMfeA
