效果展示
Demo代码
wxml
<view class="container">
<view class="big">
<view class="middle"></view>
<view class="small"></view>
</view>
</view>
wxss
page {
margin : 0;
padding: 0;
background-color:#2c3e50;
display : flex;
justify-content : center;
align-items : center;
}
.big {
position : relative;
width : 340px;
height : 340px;
background-color: #fff;
border-radius : 50%;
display : flex;
justify-content: center;
align-items : center;
filter: contrast(1000%);
}
.middle {
position : absolute;
width : 140px;
height : 140px;
background-color: #000;
border-radius : 50%;
filter : blur(5px);
}
.small {
position : absolute;
width : 80px;
height : 80px;
background-color: #f00;
border-radius : 50%;
filter : blur(5px);
animation : move 4s ease-in-out infinite both;
}
@keyframes move {
0% {
transform: translateX(-120px);
}
10% {
width : 80px;
height: 80px;
}
17.5% {
width : 70px;
height: 100px;
}
20% {
width : 80px;
height: 80px;
}
27.5% {
width : 80px;
height: 80px;
}
32.5% {
width : 100px;
height: 70px;
}
37.5% {
width : 80px;
height: 80px;
}
50% {
transform: translateX(120px);
}
60% {
width : 80px;
height: 80px;
}
67.5% {
width : 70px;
height: 100px;
}
70% {
width : 80px;
height: 80px;
}
77.5% {
width : 80px;
height: 80px;
}
82.5% {
width : 100px;
height: 70px;
}
87.5% {
width : 80px;
height: 80px;
}
100% {
transform: translateX(-120px);
}
}
https://mp.weixin.qq.com/s/OCSDRhejNyiTUWZLY6DgwQ
