<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;
width: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% { width: 300rpx; height: 300rpx; font-size: 28; left: 0; bottom: 0rpx; }
100% { width: 320rpx; height: 320rpx; font-size: 32rpx; left: 0; bottom: 30rpx; }
}
@-webkit-keyframes max_size
{
50% { width: 400rpx; height: 400rpx; }
}
重点:css3的animation还可实现小程序的文字跑马灯
再宏伟的目标,拆分下来,也只是一串串的代码而已;一串串的代码,细分来看,也只是一个一个的字母而已!也许,我做不到一晚上完成大神一小时随便敲打的项目,但为这一目标,每天添砖加瓦,我想我应该是可以完成的!