1. 程式人生 > 其它 >css實現動態箭頭

css實現動態箭頭

技術標籤:筆記css3前端

第一步: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); } }

效果

在這裡插入圖片描述