zoukankan      html  css  js  c++  java
  • 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;
      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还可实现小程序的文字跑马灯
  • 相关阅读:
    WCF实现上传图片功能
    C#中String.Empty、NULL与""三者的区别
    C#中equal与==的区别
    static 关键字的使用,静态和非静态类的区别
    C#索引器
    C# 接口的隐式与显示实现说明
    Python文件处理
    Python3.X与urllib
    python中if __name__ == '__main__'
    Python中的random模块
  • 原文地址:https://www.cnblogs.com/Annely/p/10669917.html
Copyright © 2011-2022 走看看