使用CSS3实现牛顿摇摆球动画"使用CSS3实现牛顿摇摆球动画 ```html <!DOCTYPE html> <ht

"使用CSS3实现牛顿摇摆球动画

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 500px;
      height: 500px;
      position: relative;
      border: 1px solid #ccc;
      overflow: hidden;
      margin: 0 auto;
      margin-top: 100px;
    }

    .ball {
      width: 100px;
      height: 100px;
      background-color: #ff0000;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      animation: swing 2s infinite ease-in-out;
    }

    @keyframes swing {
      0% {
        transform: translateX(-50%) rotate(0deg);
      }
      50% {
        transform: translateX(-50%) rotate(45deg);
      }
      100% {
        transform: translateX(-50%) rotate(0deg);
      }
    }
  </style>
</head>
<body>
  <div class=\"container\">
    <div class=\"ball\"></div>
  </div>
</body>
</html>

这段代码使用CSS3的动画特性实现了一个牛顿摇摆球动画。首先，创建一个容器元素（class="container"），设置宽度、高度、边框等样式，并将其设置为相对定位。然后，在容器内部创建一个球元素（class="ball"），设置宽度、高度、背景颜色、边界半径等样式，并将其设置为绝对定位，位于容器底部中间位置。接着，使用transform属性将球元素水平居中，再通过动画属性animation，设置摇摆动画效果。其中，@keyframes定义了动画关键帧，从0%到100%分别设置了不同的球的旋转角度，实现了摇摆效果。最后，将球元素放入容器中。

通过以上代码，我们就可以实现一个使用CSS3实现的牛顿摇摆球动画。当页面加载完成后，球元素会在容器底部中间位置开始摇摆，并且不断重复这个动画。可以根据需要调整容器和球的样式属性，实现更加个性化的效果。"