Html
    Css
    Js

    
                        
svg {
	width:300px;
	display:block;
	position:absolute;
}
.ball {
	width:10px;
	height:10px;
	background-color:red;
	border-radius:50%;
	offset-path:path('M10 80 Q 77.5 10,145 80 T 280 80');
	offset-distance:0%;
	animation:red-ball 2s linear alternate infinite;
}
@keyframes red-ball {
	from {
	offset-distance:0%;
}
to {
	offset-distance:100%;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

svg轨迹动画

更新时间:2022-05-19 15:14:53

0