效果展示
Demo代码
index.wxml
<view class="ring">
Haihong
<view class="a"></view>
</view>
index.wxss
page {
margin: 0; /* 外边距 */
padding: 0; /* 内边距 */
background-color: #262626; /* 背景颜色 */
}
/* Loading字符串 */
.ring {
position: absolute; /* 绝对定位 */
top: 50%; /* 距上部 */
left: 50%; /* 距左部 */
transform: translate(-50%, -50%); /* 相对于自身，x,y轴移动 */
width: 150px; /* 宽 */
height: 150px; /* 高 */
background: transparent; /* 背景颜色透明 */
border: 3px solid #3c3c3c; /* 边框 */
border-radius: 50%; /* 边框圆角 */
text-align: center; /* 字体水平居中 */
line-height: 150px; /* 行高 */
font-family: sans-serif; /* 字体样式 */
font-size: 20px; /* 字体大小 */
color: #fff000; /* 颜色 */
letter-spacing: 4px; /* 字符间距 */
text-shadow: 0 0 10px #fff000; /* 字体阴影 */
box-shadow: 0 0 20 rgba(0, 0, 0, .5); /* 盒子阴影 */
user-select: none; /* 无法选中 */
}
/* 黄色长线 */
.ring::before {
content: ''; /* 内容 */
position: absolute;
top: -3px;
left: -3px;
width: 100%;
height: 100%;
border: 3px solid transparent;
border-top: 3px solid #fff000;
border-right: 3px solid #fff000;
border-radius: 50%;
animation: animateCircle 2s linear infinite; /* 动画：名称 时间 速率 重复 */
}
.a {
display: block;
position: absolute;
top: calc(50% - 2px);
left: 50%;
width: 50%;
height: 4px;
background: transparent;
transform-origin: left; /* 动画开始位置 */
animation: animate 2s linear infinite;
transform: rotate(45deg);
}
.a::before {
content: '';
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff000;
top: -8px;
right: -8px;
box-shadow: 0 0 20px #fff000;
}
@keyframes animate {
100% {
/* 360+45 */
transform: rotate(405deg);
}
}
@keyframes animateCircle {
0% {
transform: rotate(0deg);
}
100% {
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/0RVDrMosNsVyXpuRzcr1dA
