css上下移动的图标

CSS是网页设计中必不可少的一部分，它可以让我们对页面的布局、样式和交互效果进行精细的控制。而移动图标也是网页设计中常用的元素之一，下面我们将介绍如何使用CSS实现上下移动的图标。

/*定义图标样式*/
.icon {
  width: 30px;
  height: 30px;
  background-image: url(图标路径);
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}

/*定义动画*/
.move-up {
  animation: moveUp 1s ease-in-out infinite;
}

.move-down {
  animation: moveDown 1s ease-in-out infinite;
}

@keyframes moveUp {
  0% { top: 0; }
  50% { top: -10px; }
  100% { top: 0; }
}

@keyframes moveDown {
  0% { top: 0; }
  50% { top: 10px; }
  100% { top: 0; }
} 

代码解释：

首先我们定义了一个.icon类来设置图标的样式，包括宽度、高度、背景图、背景重复和位置，还设置了原始位置是相对的。接着我们定义了两个动画类，分别为.move-up和.move-down，它们分别实现了上移和下移的动画效果。这两个动画都是1秒钟的循环动画，使用了ease-in-out缓动函数，即慢到快再到慢，可以让动画更加自然。我们还使用了@keyframes规则定义了关键帧，通过top属性实现图标的上下移动。

最后我们只需要将动画类应用到图标上，就可以实现图标的上下运动了。例如，我们可以将一个图标上移10像素，再下移10像素，不停地交替运动。具体实现代码如下：

//HTML代码
<div class="icon move-up"></div>
<div class="icon move-down"></div>

//CSS代码
.icon {
  /* 这里省略了之前的样式代码 */
  margin: 10px;
} 

在所有图标的外层容器上设置margin，可以方便地调整图标的位置和间隔。现在，我们就可以轻松实现上下移动的图标效果了。