效果图: 用到的CSS属性:offsetpath:表示运动的路径offsetdistance:运动的距离,可以是数值或者百分比,如果是100则表示走完整条路径 额外的属性:offsetrotate:表示运动的角度,默认是auto,表示指定计算当前路径的切线方向,也就是上图MDN:https:developer。mozilla。orgenUSdocsWebCSSoffsetrotate 假设设置了:offsetrotate:45 !DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metahttpequivXUACompatiblecontentIEedgemetanameviewportcontentwidthdevicewidth,initialscale1。0titleDocumenttitlestyle。box{width:5height:5background:offsetpath:path(M10,10L20,50L40,10L60,50L70,10);animation:move3offsetrotate:45}keyframesmove{100{offsetdistance:100;}}styleheadbodysvgxmlnshttp:www。w3。org2000svgversion1。1pathdM10,10L20,50L40,10L60,50L70,10strokegreenstrokewidth1fillnonesvgbodyhtml