css怎么画曲线

CSS本身不支持曲线绘制，但可以通过使用CSS3的贝塞尔曲线（bezier curve）来实现曲线绘制。

贝塞尔曲线是一种数学方法，可以用来绘制平滑曲线。在CSS中，可以通过使用cubic-bezier()函数来指定贝塞尔曲线的控制点，从而绘制曲线。

举个例子，以下代码可以绘制一条简单的曲线：

.curve {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  position: relative;
}

.curve::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background-color: #f00;
  transform: translateX(-50%) translateY(-50%) scale(0.5);
  animation: curve 2s linear infinite;
}

@keyframes curve {
  0% {
    transform: translateX(-50%) translateY(-50%) scale(0.5) translateX(0) rotate(0);
  }
  50% {
    transform: translateX(-50%) translateY(-50%) scale(0.5) translateX(100px) rotate(180deg);
  }
  100% {
    transform: translateX(-50%) translateY(-50%) scale(0.5) translateX(0) rotate(360deg);
  }
}

在这个例子中，使用了border-radius属性将::before伪元素设置为圆形。然后，使用transform属性将其缩小到原来的一半，并将其平移到父元素的中心位置。

接下来，通过CSS动画将伪元素沿着曲线运动。animation属性指定了动画名称、持续时间、时间函数和动画循环次数。@keyframes规则定义了动画的关键帧，其中使用了transform属性来控制伪元素的位置和旋转角度。

这个例子中的曲线是通过使用translateX()函数来实现的，但也可以使用cubic-bezier()函数来定义更复杂的曲线形状。例如：

.curve::before {
  /* ... */
  animation: curve 2s linear infinite;
  animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

@keyframes curve {
  /* ... */
}

在这个例子中，使用了animation-timing-function属性将动画的时间函数设置为cubic-bezier(0.7, 0, 0.3, 1)，这个函数定义了一个起点坐标为(0, 0)，终点坐标为(1, 1)的贝塞尔曲线，其控制点分别为(0.7, 0)和(0.3, 1)，可以用来绘制一条从左下角到右上角的曲线。