css制作上下平移

使用 CSS 动画实现上下平移

通过 @keyframes 和 animation 属性创建平滑的上下移动效果。定义一个关键帧动画，在 0% 和 100% 时设置垂直位移，通过 translateY 控制移动距离。

@keyframes upDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.element {
  animation: upDown 2s ease-in-out infinite;
}

使用 CSS 过渡实现悬停上下平移

通过 transition 和 :hover 实现交互式上下移动。初始状态设置默认位置，悬停时通过 transform 触发位移。

.element {
  transition: transform 0.3s ease;
}

.element:hover {
  transform: translateY(-10px);
}

使用 position: relative 与 top 属性

通过动态修改 top 值实现绝对定位元素的位移。需配合 JavaScript 或 CSS 动画控制数值变化。

.element {
  position: relative;
  animation: moveVertical 3s infinite alternate;
}

@keyframes moveVertical {
  from {
    top: 0;
  }
  to {
    top: 30px;
  }
}

使用 margin-top 实现简单位移

通过调整外边距实现布局位移。适用于非频繁移动的场景，可能影响周边元素布局。

.element {
  margin-top: 10px;
  transition: margin-top 0.5s;
}

.element.active {
  margin-top: 30px;
}

注意事项

• 优先使用 transform 而非布局属性（如 margin/top），因 transform 不影响文档流且性能更优
• 循环动画建议设置 animation-iteration-count: infinite
• 移动距离单位为 px、em 或百分比（如 translateY(50%)）