效果展示
Demo代码
index.wxml
<view class="box">
<view class="loader">
<view class="line"></view>
<view class="line"></view>
<view class="line"></view>
<view class="line"></view>
<view class="line"></view>
<view class="line"></view>
<view class="line"></view>
<view class="line"></view>
<view class="line"></view>
<view class="line"></view>
<view class="line"></view>
<view class="line"></view>
<view class="line"></view>
<view class="line"></view>
<view class="line"></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; /*内边距*/
display: flex; /*弹性盒模型*/
justify-content: center; /*主轴对齐方式*/
align-items: center; /*交叉轴对齐方式*/
min-height: 100vh; /*最小高度*/
background-color: #00cec9; /*背景颜色*/
}
.loader{
position: relative; /*相对定位*/
width: 300px; /*宽度*/
height: 300px; /*高度*/
transform-style: preserve-3d; /*保留3D状态*/
transform: perspective(500px) rotateX(60deg); /*变化：视距500px X轴旋转60度*/
}
.loader .line{
position: absolute;
display: block; /*块模型*/
border: 2px solid #fff; /*边框 2px 实线 颜色*/
box-sizing: border-box; /*宽度定位*/
border-radius: 50%; /*边框圆角*/
animation: cc 3s ease-in-out infinite; /*动画（ 名字 时间 开始-结束过渡时间 重复）*/
}
@keyframes cc{ /*动画*/
0%,100%{
transform: translateZ(-100px); /*Z轴移动*/
}
50%{
transform:translateZ(100px);
}
}
.loader .line:nth-child(1){ /*第一个元素*/
top: 0;
left: 0;
right: 0;
bottom: 0;
animation-delay: 1.4s; /*延时播放*/
}
.loader .line:nth-child(2){
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
animation-delay: 1.3s;
}
.loader .line:nth-child(3){
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
animation-delay: 1.2s;
}
.loader .line:nth-child(4){
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
animation-delay: 1.1s;
}
.loader .line:nth-child(5){
top: 40px;
left: 40px;
right: 40px;
bottom: 40px;
animation-delay: 1s;
}
.loader .line:nth-child(7){
top: 50px;
left: 50px;
right: 50px;
bottom: 50px;
animation-delay: 0.9s;
}
.loader .line:nth-child(8){
top: 60px;
left: 60px;
right: 60px;
bottom: 60px;
animation-delay: 0.8s;
}
.loader .line:nth-child(9){
top: 70px;
left: 70px;
right: 70px;
bottom: 70px;
animation-delay: 0.7s;
.
.
.
.
.
.
.
.
.
完整代码
