在网页开发中，CSS是一个非常重要的元素。但是，如果你是一个初学者，那么可能会对CSS的四个点有些疑惑。下面我们来一步一步地学习如何打出CSS的四个点。

/*第一个点*/
.dot1 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
}

/*第二个点*/
.dot2 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
  margin-left: 30px;
}

/*第三个点*/
.dot3 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
  margin-left: 30px;
  position: relative;
  top: -8px;
}

/*第四个点*/
.dot4 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
  margin-left: 70px;
  position: relative;
  top: -8px;
  animation: dot 1s linear infinite;
}

@keyframes dot {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

如上所示，我们首先定义了一个名为.dot1的CSS类，为一个圆点。它有一个黑色的背景，宽度和高度各为20像素，同时使用了border-radius属性来创建一个圆形。接下来，我们依次添加了.margin-left属性、.position属性和@keyframes动画，来实现剩下的三个点的效果。

总的来说，这里展示的只是CSS四个点的一种实现方式，但是它可以激发你的创造力并为你提供灵感。