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