CSS offset-path属性实现蚂蚁绕圈动画实例页面
回到相关文章 »效果:
代码:
CSS代码:
.ant {
display: block;
width: 30px; height: 42px;
background: url(./ant-walk-s.gif) no-repeat center/ contain;
offset-path: circle(75px);
animation: offset 3s linear infinite;
transform: rotate(90deg);
}
.shape {
width: 150px; height: 150px;
border: 2px dashed darkgray;
border-radius: 50%;
}
@keyframes offset {
to {
offset-distance: 100%;
}
}
HTML代码:
<div class="shape">
<i class="ant"></i>
</div>