css上下移动动画

CSS上下移动动画是一种让元素向上或向下移动的动画效果，可以为网页添加趣味性及改善页面布局逻辑。下面将介绍如何用CSS轻松实现上下移动动画。

.Box{
  position: relative;
  top: 0;
  transition: top 1s ease-in-out;
}
.Box:hover{
  top: 50px;
}

css上下移动动画

如上代码所示，我们首先定义了一个class名为Box，然后将其定位为相对定位（position: relative），接着设置top属性为0，表示元素初始位置在页面顶部。在这里，我们使用transition属性来进行CSS3动画，将它的过渡效果设置为1秒，缓动函数为ease-in-out（慢进慢出）。hover伪类则表示鼠标悬停时所触发的样式，这里我们将top属性设置为50px，表示元素向下移动了50像素。至此，我们就成功地实现了一个简单的上下移动动画。

如果我们希望实现无限重复往复上下移动，可以使用CSS的@keyframes规则。

.Box{
  position: relative;
  animation: moveupdown 2s ease-in-out infinite;
}
@keyframes moveupdown {
  0% {
    top: 0;
  }
  50% {
    top: 50px;
  }
  100% {
    top: 0;
  }
}

如上代码所示，我们定义了一个名为moveupdown的动画（@keyframes moveupdown），通过关键帧来控制元素的移动。在CSS中，我们可以指定在动画运行的不同时间点上元素的样式，其中0%表示动画开始的时候，而100%表示动画结束的时候。在这里，我们定义了3个关键帧，分别为0%、50%、100%。我们设置第1和3个关键帧的top值都为0，以使元素往返上下移动；第2个关键帧的top值为50px，表示元素在移动过程中是否可见。最后，我们将animation的属性值设为moveupdown，元素就会不断往返移动了。

相关推荐