效果展示
Demo代码
index.wxml
<view>
<view class="container circle">
<view class="box1 circle center"></view>
<view class="box2 circle center"></view>
<view class="box3 circle center"></view>
<view class="box4 circle center"></view>
<view class="box5 circle center"></view>
<view class="box6 circle">
<view class="coil" style="--i: 0"></view>
<view class="coil" style="--i: 1"></view>
<view class="coil" style="--i: 2"></view>
<view class="coil" style="--i: 3"></view>
<view class="coil" style="--i: 4"></view>
<view class="coil" style="--i: 5"></view>
<view class="coil" style="--i: 6"></view>
<view class="coil" style="--i: 7"></view>
</view>
</view>
</view>
index.wxss
page {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: radial-gradient(#353c44, #222931);
}
.circle {
border-radius: 50%;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container {
position: relative;
width: 300px;
height: 300px;
border: 1px solid rgb(18, 20, 20);
background-color: #384c50;
box-shadow: 0 0 32px 8px rgb(18, 20, 20), 0 0 4px 1px rgb(18, 20, 20) inset;
}
.container .box1 {
width: 238px;
height: 238px;
background-color: rgb(22, 26, 27);
box-shadow: 0 0 4px 1px #52fefe;
}
.container .box2 {
width: 220px;
height: 220px;
background-color: #fff;
box-shadow: 0 0 5px 1px #52fefe, 0 0 5px 4px #52fefe inset;
}
.container .box3 {
width: 180px;
height: 180px;
background-color: #073c4b;
box-shadow: 0 0 5px 4px #52fefe, 0 0 6px 2px #52fefe inset;
}
.container .box4 {
width: 120px;
height: 120px;
border: 1px solid #52fefe;
background-color: #fff;
box-shadow: 0 0 2px 1px #52fefe, 0 0 10px 5px #52fefe inset;
}
.container .box5 {
width: 70px;
height: 70px;
border: 5px solid #1b4e5f;
box-shadow: 0 0 7px 5px #52fefe, 0 0 10px 10px #52fefe inset;
}
.container .box6 {
position: relative;
width: 100%;
height: 100%;
animation: rotate 3s linear infinite;
}
.container .box6 .coil {
position: absolute;
width: 30px;
height: 20px;
top: calc(50% - 110px);
left: calc(50% - 15px);
background-color: #073c4b;
box-shadow: 0 0 5px #52fefe inset;
transform: rotate(calc(var(--i) * 45deg));
transform-origin: center 110px;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
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 () {
}
})
