css3實現小程序的動畫

<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還可實現小程序的文字跑馬燈