css一个方块在框里移动

CSS是网页设计中不可或缺的一部分，它可以让我们实现各种各样的效果。今天我们来学习一下如何让一个方块在框里移动。
以下是我们所需要的HTML和CSS代码：

<div class="container">
  <div class="box"></div>
</div>
<br>
<style>
.container {
  width: 200px;
  height: 200px;
  background-color: #eee;
  position: relative;
}
<br>
.box {
  width: 50px;
  height: 50px;
  background-color: #f00;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style> 

在这段代码中，我们创建了一个class为container的div，用来作为方块移动的容器。并且我们给这个div一个背景颜色，以方便我们观察方块的移动情况。
同时，我们创建了一个class为box的div，作为我们需要移动的方块。为了将这个方块居中放置，我们使用了position:absolute属性并且使用top、left、transform属性使其居中。
接下来，我们需要使用CSS动画来实现方块的移动。以下是需要添加的CSS代码：

.box {
  animation: move 3s linear infinite;
}
<br>
@keyframes move {
  0% {
    left: 0;
  }
  50% {
    left: 150px;
  }
  100% {
    left: 0;
  }
} 

在这段代码中，我们使用了animation属性来实现方块的移动。我们给它传递了一个名为move的动画，并且让这个动画在3秒的时间内线性播放，循环无限次。
接下来，我们定义了这个动画的关键帧，也就是方块在不同时刻的位置。当时间为0%的时候，方块的left值为0，在50%的时候，方块的left值为150px，在100%的时候，方块又回到了left值为0的位置。
这就是如何让一个方块在框里移动的方法，通过使用CSS动画和关键帧，我们可以实现各种各样的动态效果。