使用要点： animation、transform、transform-origin、摆动位置统一后，实现同角度摆动。
代码实现：
#box{
width:300px；
height:300px；
border :1 pxsolidrgba (0，140，255，0.623 )；
position: relative；
}
. center-circle{
width:20px；
height:20px；
背景色： RGB (216、166、28；
border-radius: 10px；
位置： absolute；
top:0；
left:0；
bottom: 0；
right: 0；
margin :自动；
}
. plate-circle{
width:48px；
height:48px；
border-radius: 50%；
背景色： RGB (216、166、28；
位置： absolute；
top:276px；
left:126px；
animation : pendulum-animation4slinearinfinite；
/*
变换-定向更改已转换元素的位置。 默认值为50% 50% 0
使摆锤旋转位置与中心圈的中心一致
*/
transform-origin: 50% -127px；
}
. connecting-line{
width:4px；
height:150px；
背景色： RGB (216、166、28；
位置： absolute；
top: 50%；
left: 148px；
animation : pendulum-animation4slinearinfinite；
/*使拼盘的切换位置与center-circle的中心一致*
变换- Origin : 50 % 0；
}
@keyframes pendulum-animation{
0 % { transform 3360旋转(0deg )； }
25 % { transform 3360 rotate (-30度) }
50 % { transform 3360旋转(0deg )； }
75 % { transform 3360 rotate (30度)； }
100 % { transform 3360旋转(0deg )； }
}