css动画沿长方形边长滑动

CSS 动画可以创建各种视觉效果，包括让元素沿着长方形边长滑动。要实现这个效果，你可以结合 CSS `keyframes` 规则和 `animation` 属性。首先，你需要定义两个关键帧，分别表示元素的起始位置和结束位置，以及它们应该沿着长方形的哪一侧移动。

例如，假设有一个宽度为 200px 的 `.slide-container` 长方形容器，你想让一个内部元素 `.slide-element` 沿着宽度方向滑动：

1. 定义样式：

.slide-container {
  position: relative;
  width: 200px; /* 长方形宽度 */
}

.slide-element {
  position: absolute;
  width: 50px; /* 需要滑动的元素宽度 */
  height: 50px;
  background-color: red; /* 样式自选 */
}

/* 定义动画 */
@keyframes slide-long {
  0% {
    left: 0;
  }
  100% {
    left: calc(100% - 50px); /* 终点位置等于容器宽度减去元素宽度 */
  }
}

2. 应用动画：

.slide-element {
  animation-name: slide-long;
  animation-duration: 2s; /* 持续时间 */
  animation-timing-function: ease; /* 变化速度 */
}

当`.slide-element`应用了上述动画后，它就会从左到右（如果容器在屏幕左侧）沿着`.slide-container`的宽度方向平滑滑动。