CSS牛頓擺動(dòng)畫(huà)是一個(gè)很有趣的動(dòng)畫(huà)效果，可以模擬牛頓擺在自由擺動(dòng)的狀態(tài)下的運(yùn)動(dòng)軌跡，讓頁(yè)面效果更加生動(dòng)有趣。

想要使用CSS牛頓擺動(dòng)畫(huà)非常簡(jiǎn)單，只需使用CSS中的關(guān)鍵幀動(dòng)畫(huà)以及一些基本的CSS樣式就可以實(shí)現(xiàn)。

代碼如下：

/* 定義牛頓擺的基本樣式 */
.newton-pendulum {
width: 4px;
height: 100px;
background-color: #f00;
position: absolute;
top: 50%;
left: 50%;
margin-top: -61px;
margin-left: -2px;
transform-origin: center bottom;
animation: newton-pendulum 2s ease-in-out infinite alternate;
}
/* 定義關(guān)鍵幀動(dòng)畫(huà) */
@keyframes newton-pendulum {
0% {
transform: rotate(3deg);
}
50% {
transform: rotate(-3deg);
}
100% {
transform: rotate(3deg);
}
}

以上代碼中，我們首先定義了一個(gè)div元素，其class為“newton-pendulum”，這個(gè)元素即為我們需要實(shí)現(xiàn)動(dòng)畫(huà)的元素。我們通過(guò)一系列的基本樣式來(lái)定義這個(gè)元素的樣式，包括它的高度、寬度、背景顏色、位置等等。其中，我們通過(guò)設(shè)置“transform-origin”屬性來(lái)指定元素的旋轉(zhuǎn)中心點(diǎn)為底部中心。

接著，我們定義了一個(gè)名為“newton-pendulum”的關(guān)鍵幀動(dòng)畫(huà)。這個(gè)動(dòng)畫(huà)分為三個(gè)關(guān)鍵幀，分別對(duì)應(yīng)動(dòng)畫(huà)的三個(gè)階段：擺動(dòng)左側(cè)、擺動(dòng)右側(cè)、擺動(dòng)回到左側(cè)兩個(gè)極點(diǎn)的過(guò)程。在每個(gè)關(guān)鍵幀中，我們通過(guò)“transform: rotate()”屬性來(lái)控制元素的旋轉(zhuǎn)角度。

最后，我們?cè)谠氐臉邮街惺褂谩癮nimation”屬性來(lái)設(shè)置該元素使用這個(gè)名為“newton-pendulum”的關(guān)鍵幀動(dòng)畫(huà)，并指定持續(xù)時(shí)間為2秒，運(yùn)動(dòng)方式為“ease-in-out”，無(wú)限循環(huán)播放，且交替方向運(yùn)動(dòng)。

通過(guò)這極其簡(jiǎn)單的代碼，我們就可以輕松實(shí)現(xiàn)一個(gè)有趣的CSS牛頓擺動(dòng)畫(huà)效果。