Html
    Css
    Js

    
                        
@keyframes move {
	0% {
	offset-distance:0%;
}
100% {
	offset-distance:100%;
}
}.shaft {
	padding:100px 35px 20px;
	width:1200px;
	height:500px;
	box-shadow:0px 0px 20px 0px rgba(2,38,135,0.09);
}
.bg img {
	width:100%;
}
.shaft::before {
	position:absolute;
	content:"";
	width:20px;
	height:20px;
	background:red;
	border-radius:50%;
	offset-path:path(
	    "m31,308c0,0 0.29289,0.29289 1,1c0.70711,0.70711 2.69344,1.4588 4,2c0.92388,0.38269 2.69344,1.4588 4,2c0.92388,0.38269 3.29289,0.29289 4,1c0.70711,0.70711 1.07612,0.61731 2,1c1.30656,0.5412 2.07612,0.61731 3,1c1.30656,0.5412 2,2 3,2c1,0 1,1 2,1c1,0 1.29289,0.29289 2,1c0.70711,0.70711 2,0 3,0c1,0 1.29289,0.29289 2,1c0.70711,0.70711 1,1 2,1c1,0 2,0 3,0c1,0 1.29289,0.29289 2,1c0.70711,0.70711 2,0 3,0c1,0 2.29289,-0.70711 3,0c0.70711,0.70711 1,1 2,1c1,0 2,0 3,0c1,0 1.69344,0.4588 3,1c0.92388,0.38269 1.29289,0.29289 2,1c0.70711,0.70711 2,0 3,0c1,0 1,1 2,1c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c2,0 3,0 4,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 4,0c1,0 1,-1 2,-1c1,0 2.29289,0.70711 3,0c0.70711,-0.70711 1.58578,0.41422 3,-1c0.70711,-0.70711 1,-1 2,-1c1,0 1,-1 2,-1c1,0 1.29289,-0.29289 2,-1c0.70711,-0.70711 1,-1 2,-1c1,0 1,-1 2,-1c1,0 2.29289,-0.29289 3,-1c0.70711,-0.70711 1.29289,-1.29289 2,-2c0.70711,-0.70711 1.29289,-0.29289 2,-1c0.70711,-0.70711 0.61731,-1.07613 1,-2c0.5412,-1.30656 2,-1 3,-2c1,-1 1.29289,-1.29289 2,-2c0.70711,-0.70711 1.29289,-0.29289 2,-1c0.70711,-0.70711 1.29289,-0.29289 2,-1c0.70711,-0.70711 1.29289,-0.29289 2,-1c0.70711,-0.70711 0,-2 1,-2c1,0 2,-1 3,-1c1,0 2,-1 3,-1c1,0 1,-1 2,-1c1,0 1.69344,-0.4588 3,-1c0.92387,-0.38268 2,0 3,0c1,0 1.29289,-0.29289 2,-1c0.70711,-0.70711 2,0 3,0c1,0 1,-1 2,-1c1,0 2.29289,0.70711 3,0c0.70711,-0.70711 1.02675,-0.77025 2,-1c2.17625,-0.51374 2.29289,-1.29289 3,-2c0.70711,-0.70711 2.07613,0.38268 3,0c1.30656,-0.5412 2.29289,-0.29289 3,-1c0.70711,-0.70711 1.4588,-0.69344 2,-2c0.38269,-0.92388 0.69344,-1.4588 2,-2c0.92387,-0.38268 1.29289,-0.29289 2,-1c0.70711,-0.70711 0.29289,-1.29289 1,-2c0.70711,-0.70711 0,-2 1,-2c1,0 1.29289,-0.29289 2,-1c0.70711,-0.70711 1,-1 2,-1c1,0 2,-1 3,-1c1,0 2.29289,0.70711 3,0c0.70711,-0.70711 1,-1 2,-1c1,0 2,0 3,0c1,0 2.29289,0.70711 3,0c0.70711,-0.70711 1,-1 2,-1c2,0 2,-1 3,-1c1,0 2,0 3,0c1,0 1.29289,-0.29289 2,-1c0.70711,-0.70711 2,0 3,0c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 2,0 3,0c1,0 2.29291,-0.29289 3,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 2,0 3,0c1,0 2.29291,0.70711 3,0c0.70709,-0.70711 1,-1 2,-1c1,0 2.29291,0.70711 3,0c0.70709,-0.70711 1,-1 3,-1c1,0 2,0 3,0c1,0 1,-1 2,-1c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 1.69345,0.4588 3,1c0.92389,0.38268 1.69345,0.4588 3,1c0.92389,0.38268 1.69345,0.4588 3,1c0.92389,0.38268 1,1 2,1c1,0 1.29291,0.29289 2,1c0.70709,0.70711 1.69345,0.4588 3,1c0.92389,0.38268 1.29291,0.29289 2,1c0.70709,0.70711 1.29291,0.29289 2,1c0.70709,0.70711 2,0 3,0c1,0 1,1 2,1c1,0 2,1 3,1c1,0 2.4588,-0.30656 3,1c0.38269,0.92388 1,1 2,1c1,0 1,1 2,1c1,0 2.29291,-0.70711 3,0c0.70709,0.70711 1,1 2,1c1,0 1,1 2,1c1,0 2.29291,-0.70711 3,0c0.70709,0.70711 1,1 2,1c1,0 2,0 3,0c1,0 2.29291,-0.70711 3,0c0.70709,0.70711 1,1 2,1c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,1 3,1c1,0 2,0 3,0c1,0 2,0 3,0c1,0 3,0 4,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2.29291,0.70711 3,0c0.70709,-0.70711 0.69345,-1.4588 2,-2c0.92389,-0.38268 1.07611,-0.61732 2,-1c1.30655,-0.5412 1.29291,-1.29289 2,-2c0.70709,-0.70711 1.29291,-1.29289 2,-2c0.70709,-0.70711 1,-1 2,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 0,-2 1,-2c1,0 1,-1 2,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1,-1 2,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1,-1 2,-1c1,0 1,-1 2,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1,-1 2,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.69345,-1.4588 2,-2c0.92389,-0.38268 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0,-2 1,-2c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.69345,-1.4588 2,-2c0.92389,-0.38268 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 2.29291,-0.29289 3,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1.69345,-0.45881 3,-1c0.92389,-0.38268 1,-1 2,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1,-1 2,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1,-1 2,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 2.29291,0.70711 3,0c0.70709,-0.70711 1,-1 2,-1c1,0 1,-1 2,-1c1,0 2.186,0.30745 4,-1c1.14728,-0.8269 2,-1 3,-1c1,0 2.29291,0.70711 3,0c0.70709,-0.70711 1,-1 2,-1c1,0 2,0 3,0c1,0 1,-1 2,-1c1,0 2,0 3,0c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 2.29291,0.70711 3,0c0.70709,-0.70711 1,-1 2,-1c1,0 1,-1 2,-1c1,0 2,0 3,0c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 3,0 4,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2.29291,-0.70711 3,0c0.70709,0.70711 1.29291,0.29289 2,1c0.70709,0.70711 0.29291,1.29289 1,2c0.70709,0.70711 1,1 2,1c1,0 1.29291,0.29289 2,1c0.70709,0.70711 1.29291,0.29289 2,1c0.70709,0.70711 1.29291,0.29289 2,1c0.70709,0.70711 2.29291,-0.70711 3,0c0.70709,0.70711 1.29291,0.29289 2,1c0.70709,0.70711 1,1 2,1c1,0 1.29291,0.29289 2,1c0.70709,0.70711 1,1 2,1c1,0 1,1 2,1c1,0 2,0 3,0c1,0 1.29291,0.29289 2,1c0.70709,0.70711 2,0 3,0c1,0 1.29291,0.29289 2,1c0.70709,0.70711 1.29291,0.29289 2,1c0.70709,0.70711 2,0 3,0c1,0 1,1 2,1c1,0 1.29291,0.29289 2,1c0.70709,0.70711 2.29291,-0.70711 3,0c0.70709,0.70711 0.29291,1.29289 1,2c0.70709,0.70711 2.29291,-0.70711 3,0c0.70709,0.70711 1.29291,0.29289 2,1c0.70709,0.70711 1,1 2,1c1,0 1.07611,0.61732 2,1c1.30658,0.54119 2.29291,0.29289 3,1c0.70709,0.70711 1.29291,0.29289 2,1c0.70709,0.70711 1.29291,0.29289 2,1c0.70709,0.70711 0.69342,1.45881 2,2c0.92389,0.38268 1.29291,0.29289 2,1c0.70709,0.70711 2.29291,-0.70711 3,0c0.70709,0.70711 1,1 2,1c1,0 1,1 2,1c1,0 2.29291,0.29289 3,1c0.70709,0.70711 1,1 2,1c1,0 1,1 2,1c1,0 2.29291,-0.70711 3,0c0.70709,0.70711 1,1 2,1c1,0 2.29291,-0.70711 3,0c0.70709,0.70711 1.07611,0.61732 2,1c1.30658,0.5412 2,1 3,1c1,0 2,1 3,1c1,0 1.29291,0.29289 2,1c0.70709,0.70711 2,0 3,0c1,0 2,0 3,0c1,0 1.29291,0.29289 2,1c0.70709,0.70711 2,0 3,0c1,0 2,0 3,0c1,0 1.29291,0.29289 2,1c0.70709,0.70711 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,-1 3,-1c1,0 2,0 3,0c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 2.07611,0.38268 3,0c1.30658,-0.5412 2,-1 3,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1,-1 2,-1c1,0 2.07611,-0.61732 3,-1c1.30658,-0.5412 1.69342,-1.4588 3,-2c0.92389,-0.38268 1.69342,-0.45881 3,-1c0.92389,-0.38268 1.29291,-0.29289 2,-1c0.70709,-0.70711 2,0 3,0c1,0 1,-1 2,-1c1,0 2.29291,0.70711 3,0c0.70709,-0.70711 1.07611,-0.61732 2,-1c1.30658,-0.54119 2,-1 3,-1c1,0 2,-1 3,-1c1,0 1,-1 2,-1c1,0 2.29291,0.70711 3,0c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1,-1 2,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 0.69342,-1.45881 2,-2c0.92389,-0.38268 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1,-1 2,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 2.29291,0.70711 3,0c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0,-2 1,-2c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1,-1 2,-1l0,-1"
	    );
	    offset-rotate:0deg;
	animation:move 3s infinite alternate ease-in-out;
}

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

纯css路径动画

更新时间:2023-04-20 21:40:15

纯css路径动画 自定义路径动画 小球滚动动画

0