css动画图片放大缩小

2,820 阅读1分钟
  兼容微信小程序 动画流畅
  <view class="bt-gm"></view>
  @keyframes scaleDraw {
      /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
      0% {
          transform: scale(1); /*开始为原始大小*/
      }
      25% {
          transform: scale(1.1); /*放大1.1倍*/
      }
      50% {
          transform: scale(1);
      }
      75% {
          transform: scale(1.1);
      }
  }
  .bt-gm {
      width: 272upx; 
      height: 97upx;
      background: url('../../static/bt.png');
      background-size: 100% 100%;
      -webkit-animation-name: scaleDraw; /*关键帧名称*/
      -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
      -webkit-animation-iteration-count: infinite; /*动画播放的次数*/
      -webkit-animation-duration: 1.3s; /*动画所花费的时间*/
  }