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>