offset-path元素沿着路径运动CSS实现实例页面

回到相关文章 »

效果:

代码:

CSS代码:
.horse-run {
    /* 之前语法 始于2015年9月,M58版本会移除,大约2017年4月 */
    motion-path: path("M10,80 q100,120 120,20 q140,-50 160,0");
     
    /* 当前规范上的语法 2016年12月支持 */
    offset-path: path("M10,80 q100,120 120,20 q140,-50 160,0");

    animation: move 3s linear infinite;
}

@keyframes move {
  /* 之前语法 */
  100% { motion-offset: 100%;}
  /* 当前规范语法 */
  100% { offset-distance: 100%;}
}
                
HTML代码:
<img src="horse.png" width="40" height="43" class="horse-run">
<svg width="280" height="150" viewBox="0 0 280 150">
    <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>