<view class="biground" >
<block wx:for="{{Namelist}}" wx:key="">
<text class="user-motto" style='font-size: 80%;'>送餐报酬</text>
<text class="user-motto" style='font-size: 180%;'>{{item.money}}元</text>
<text class="user-motto" style='font-size: 120%;'>点击送餐</text>
<text class="user-motto" style='font-size: 60%;'>{{item.sex}}</text>
</block>
</view>
.biground{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
310rpx;
height:310rpx;
border-radius:50%;
margin-bottom: 30rpx;
margin-top: 500rpx;
animation: max_size 1s infinite;
-webkit-animation: max_size 4s infinite;
color: #fff;
box-shadow: 0 0 60rpx rgba(255,216,216,1);
position: relative;
animation-direction: alternate-reverse;
}
.biground text{
color: #fff;
}
@keyframes max_size
{
0% { 300rpx; height: 300rpx; font-size: 28; left: 0; bottom: 0rpx; }
100% { 320rpx; height: 320rpx; font-size: 32rpx; left: 0; bottom: 30rpx; }
}
@-webkit-keyframes max_size
{
50% { 400rpx; height: 400rpx; }
}
重点:css3的animation还可实现小程序的文字跑马灯