当前位置：首页 > CSS

css制作机动画

2026-03-12 12:03:54CSS

使用CSS制作机械动画

CSS动画可以通过关键帧（@keyframes）和过渡（transition）实现机械动画效果。以下是几种常见方法：

基础旋转动画

.gear {
  width: 100px;
  height: 100px;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

齿轮啮合效果

.gear-large {
  width: 120px;
  height: 120px;
  animation: rotate 3s linear infinite;
}

.gear-small {
  width: 60px;
  height: 60px;
  animation: rotate-reverse 1.5s linear infinite;
}

@keyframes rotate-reverse {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

活塞运动动画

css制作机动画

.piston {
  width: 30px;
  height: 80px;
  animation: pump 1s ease-in-out infinite alternate;
}

@keyframes pump {
  0% { transform: translateY(0); }
  100% { transform: translateY(40px); }
}

传送带效果

.conveyor-belt {
  width: 300px;
  height: 20px;
  background: repeating-linear-gradient(
    90deg,
    #ccc,
    #ccc 20px,
    #999 20px,
    #999 40px
  );
  animation: move 2s linear infinite;
}

@keyframes move {
  from { background-position: 0 0; }
  to { background-position: 40px 0; }
}

3D机械臂效果

css制作机动画

.arm {
  width: 20px;
  height: 100px;
  transform-origin: top center;
  animation: swing 3s ease-in-out infinite alternate;
}

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

进阶技巧

变速动画

.variable-speed {
  animation: 
    rotate 5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

多部件同步

.machine-part-1 { animation-delay: 0s; }
.machine-part-2 { animation-delay: 0.2s; }
.machine-part-3 { animation-delay: 0.4s; }

使用CSS变量控制

:root {
  --animation-speed: 2s;
}

.machine {
  animation-duration: var(--animation-speed);
}

性能优化建议

优先使用transform和opacity属性，这些属性不会触发重排
减少动画元素数量，复杂机械可考虑使用SVG
对静止元素使用will-change: transform提升性能
适当降低动画帧率，机械动画不需要太高流畅度

浏览器兼容方案

@-webkit-keyframes rotate {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

.machine {
  -webkit-animation: rotate 2s linear infinite;
          animation: rotate 2s linear infinite;
}

标签: css