利用只是點(diǎn)：animation扼倘、transform除呵、transform-origin颜曾，擺動(dòng)位置統(tǒng)一，就會(huì)實(shí)現(xiàn)同角度擺動(dòng)泛豪。
代碼實(shí)現(xiàn)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width:300px;
height:300px;
border: 1px solid rgba(0, 140, 255, 0.623);
position: relative;
}
.center-circle{
width:20px;
height:20px;
background-color:rgb(216, 166, 28);
border-radius: 10px;
position: absolute;
top:0;
left:0;
bottom: 0;
right: 0;
margin: auto;
}
.plate-circle{
width:48px;
height:48px;
border-radius: 50%;
background-color: rgb(216, 166, 28);
position: absolute;
top:276px;
left:126px;
animation: pendulum-animation 4s linear infinite;
/*
transform-origin改變被轉(zhuǎn)換元素的位置诡曙，默認(rèn)值：50% 50% 0
將擺盤的轉(zhuǎn)換位置定位與center-circle的中心的重合
*/
transform-origin: 50% -127px;
}
.connecting-line{
width:4px;
height:150px;
background-color: rgb(216, 166, 28);
position:absolute;
top: 50%;
left: 148px;
animation: pendulum-animation 4s linear infinite;
/*將擺盤的轉(zhuǎn)換位置定位與center-circle的中心的重合*/
transform-origin: 50% 0;
}
@keyframes pendulum-animation{
0% {transform: rotate(0deg);}
25% {transform:rotate(-30deg)}
50% {transform: rotate(0deg);}
75% {transform: rotate(30deg);}
100% {transform: rotate(0deg);}
}
</style>
</head>
<body>
<div id = "box">
<!-- 擺動(dòng)中心點(diǎn) -->
<div class="center-circle"></div>
<!-- 擺鐘連接線 -->
<div class="connecting-line"></div>
<!-- 擺盤 -->
<div class="plate-circle"></div>
</div>
</body>
</html>
