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