css實現動態箭頭
阿新 • • 發佈:2021-02-14
第一步: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);
}
}