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>