css模块上下移动循环，动画动效

**CSS 模块上下移动循环，动画动效**

在 CSS 中，我们可以使用各种方法来实现模块的上下移动循环效果。这里我们将介绍几种常见的方法，以及如何结合 CSS 动画技术来实现更酷炫的效果。

### 方法一：使用 transform 和 animation首先，让我们看看最简单的方法：使用 `transform` 属性和 `animation` 属性。

css.module {
 position: relative;
 width:100px;
 height:100px;
 background-color: #f00;
}

@keyframes move-up {
0% { transform: translateY(0); }
50% { transform: translateY(-200px); }
100% { transform: translateY(0); }
}

.module::after {
 content: '';
 position: absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-color: #fff;
 animation: move-up2s infinite;
}

在这个例子中，我们定义了一个 `.module` 元素，设置其背景颜色为红色。然后，我们定义了一个 `move-up` 动画，使用 `transform` 属性将模块向上移动200 像素，然后再次回到原位。最后，我们使用 `::after`伪元素来应用这个动画。

### 方法二：使用 keyframes 和 animation下面是另一种方法：使用 `keyframes` 规则和 `animation` 属性。

css.module {
 position: relative;
 width:100px;
 height:100px;
 background-color: #f00;
}

@keyframes move-down {
0% { transform: translateY(0); }
50% { transform: translateY(200px); }
100% { transform: translateY(0); }
}

.module::after {
 content: '';
 position: absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-color: #fff;
 animation: move-down2s infinite;
}

这个例子与前一个例子非常相似，只是动画方向相反。

### 方法三：使用 CSS 动画和 transition最后，让我们看看如何使用 CSS 动画和 `transition` 属性来实现上下移动循环效果。

css.module {
 position: relative;
 width:100px;
 height:100px;
 background-color: #f00;
}

.module::after {
 content: '';
 position: absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-color: #fff;
 transform: translateY(0);
 transition: transform2s infinite;
}

.module:hover::after {
 transform: translateY(-200px);
}

在这个例子中，我们使用 `transition` 属性来实现模块的上下移动效果。当用户鼠标悬停在模块上时，`.module::after` 元素会向上移动200 像素。

### 总结以上是几种常见的方法和代码示例，用于实现 CSS 模块上下移动循环效果。这些方法可以结合使用，以创造出更酷炫的动画效果。