CSS 牛頓擺是一個基于 CSS 動畫的演示，它重現(xiàn)了牛頓擺的物理性質。這個演示是一個簡單但生動的例子，展示了 CSS 動畫的實際應用。下面就讓我們來了解一下如何實現(xiàn)這個演示吧！

.pendulum{
position: absolute;
top: 50px;
left: 50px;
width: 10px;
height: 100px;
background-color: black;
border-radius: 50%;
transform-origin: top center;
transform: rotate(-20deg);
animation: swing 2s ease-in-out infinite alternate;
}
@keyframes swing{
from{transform: rotate(-20deg)}
to{transform: rotate(20deg)}
}

首先，我們需要使用 CSS 來繪制牛頓擺。在這個例子中，我們使用一個圓形 div 元素作為擺的小球，并將它的背景顏色設置為黑色。我們還設置了元素的高度、寬度和位置等屬性。

接下來，我們使用 CSS3 動畫的@keyframes規(guī)則來完成擺的擺動效果。我們將擺的旋轉點設置為transform-origin: top center;，這是因為牛頓擺的錨點在上方。接著，我們通過從一個角度值到另一個角度值的變化來制作了一個 named 動畫，名字是swing。

最后，我們將動畫應用于我們的小球元素上，同時設置了循環(huán)次數(shù)和交替模式。這樣，我們就完成了整個牛頓擺的動畫。整個過程十分簡單，只需幾行 CSS 代碼就能實現(xiàn)！