Html
    Css
    Js

    
                        
.a {
	width:100%;
	height:100%;
	background:#cffdf;
	margin:20px auto;
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-flow:column nowrap;
}
.b {
	width:30px;
	height:30px;
	border-radius:50%;
	background:red;
	position:absolute;
}
.a .img {
	display:inline-block;
	width:120px;
	height:120px;
	color:#fff;
	font-size:28px;
	text-align:center;
	line-height:120px;
}
.a .row {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-flow:row wrap;
}
.center {
	/*display:flex;
	justify-content:center;
	align-items:center;
	flex-flow:row nowrap;
	*/
}
.cenc {
	/*height:480px;
	*/
            /*display:flex;
	justify-content:center;
	align-items:center;
	flex-flow:column wrap;
	*/
}
.cenregion {
	display:inline-block;
	width:340px;
	height:340px;
	margin:9px;
	border:1px solid #ccc;
	border-radius:3px;
}
.hi {
	opacity:0;
}

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

可随意调整方块位置,保证小球按照路线运动

打开页面看到很多方块,具体显示多少可以在代码设置,用户可以用鼠标拖拽显示的方块到其他位置,最后拼成您想要的图像。但是需要注意的是方块上面的数字就是小球运动的先后顺序,无论你是想要什么形状的图案,是顺时针还是逆时针转动,都需要注意方块的序号,只要保证数字顺序就能按照你图案运动

0