css div位置移动动画

在网页设计中，CSS动画是提高用户体验的重要手段之一。其中，CSS div位置移动动画是比较常见的动画形式，可以为网页增添活力的同时，也能更好地引导用户眼球。

  .box {
    width: 100px;
    height: 100px;
    background-color: #ff0000;
    position: absolute;
    left: 0;
    top: 0;
  }

  .box.move {
    animation: move 2s forwards;
  }

  @keyframes move {
    from {
      left: 0;
      top: 0;
    }
    to {
      left: 200px;
      top: 200px;
    }
  }

上述代码是一个简单的CSS div位置移动动画实现。首先，我们定义了一个class为box的div，设置其宽高和背景颜色，并使用position属性将其定位在页面左上角。

接下来，我们通过为该div添加移动动画所需的class，即move来触发动画。其中，我们使用了animation属性，指定了动画名称为move，持续时间为2秒，并设置了forward参数，使动画结束状态固定为最终状态。

最后，我们编写了@keyframes关键帧，描述了动画的起始状态和结束状态。在本例中，我们设置了起始位置为(0, 0)，结束位置为(200px, 200px)。

通过以上的代码，我们实现了简单的位置移动动画效果。当然，我们可以通过调整各种属性和关键帧来实现更加多样化的动画效果，为网页增加更多的互动性和趣味性。