css实现动态箭头

第一步：image一个箭头icon

<image class="img" bindtap="touser" src="/icon/right.png">
  <text class="mid-text">个人中心text>
image>

第二步：css中

.img{
  position: absolute;
  bottom: 100rpx;
  right: 40rpx;
  width: 100px;
  height: 100px;
  animation: clipMe 3.5s infinite;/*动画*/
}
@keyframes clipMe {
  0%, 100% {
    clip: rect(0px, 0px, 170px, 0px);
  }
  25% {
    clip: rect(0px, 150px, 170px, 0px);
  }
  50% {
    clip: rect(0px, 250px, 170px, 0px);
  }
  75% {
    clip: rect(0px, 500px, 170px,0px);
  }
}

效果