css钟摆制作

钟摆动画实现

通过CSS动画和关键帧可以实现钟摆摆动效果，主要利用transform属性和rotate实现左右摆动。

.pendulum {
  position: relative;
  width: 2px;
  height: 200px;
  background: #333;
  margin: 0 auto;
  transform-origin: top center;
}

.pendulum::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ff5722;
}

.swing {
  animation: swing 2s ease-in-out infinite alternate;
}

@keyframes swing {
  0% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}

HTML结构

需要配合简单的HTML结构来承载CSS样式：

<div class="pendulum swing"></div>

物理效果优化

为了使摆动更自然，可以调整动画曲线和旋转角度：

@keyframes swing {
  0%, 100% {
    transform: rotate(15deg);
    animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
  }
  50% {
    transform: rotate(-15deg);
    animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
  }
}

悬挂点添加

完整的钟摆通常包含悬挂支架：

.stand {
  width: 100px;
  height: 10px;
  background: #333;
  margin: 0 auto 10px;
}

对应的HTML更新为：

<div class="stand"></div>
<div class="pendulum swing"></div>

3D效果增强

通过perspective和rotateX可以增加立体感：

.pendulum {
  transform-style: preserve-3d;
  transform: rotateX(10deg);
}

这些代码组合起来即可创建一个具有物理感的CSS钟摆动画效果。