css上下浮动动画

CSS上下浮动动画是一种常用的网页动效之一，可以增加网页的活力和吸引力。它的实现方式很简单，只需要借助CSS的transition和transform属性即可。

/* 准备工作 */
.box {
  position: relative; /* 使下方的子元素能够相对于此元素设置top和bottom */
}
.item {
  position: absolute; /* 定位 */
  left: 50%; /* 向左偏移50%，使其在父元素居中 */
  transform: translateX(-50%); /* 修正偏移的位置 */
  transition: transform 0.3s ease-in-out; /* 设置过渡效果 */
}

/* 鼠标悬浮时展开效果 */
.item:hover {
  transform: translateY(-10px); /* 向上移动10像素 */
} 

以上代码中，我们为外层容器.box设置了相对定位，内部元素.item通过绝对定位继承了.box的定位。transform: translateX(-50%)使.item水平居中，transition: transform 0.3s ease-in-out添加了动画效果。

当鼠标悬浮在.item上时，我们通过设置transform: translateY(-10px)使元素相对于当前位置向上移动10像素，实现了上浮动画效果。

通过这种方法，我们可以轻松实现简单的CSS动画效果，使网页更加生动、吸引人。