css如何实现一条曲线

CSS 可以实现各种各样的效果，其中之一就是实现一条曲线。要实现曲线，我们需要使用 CSS 的贝塞尔曲线函数 cubic-bezier()。

.curve {
      width: 100%;
      height: 400px;
      position: relative;
}
.curve:before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      background-color: #F6F6F6;
      transform-origin: center top;
      transform: skewY(-10deg) rotate(-10deg);
      animation: curve 4s ease-in-out infinite;
}
@keyframes curve {
  0% {
        transform: skewY(-10deg) rotate(-10deg) translateX(0%);
  }
  50% {
        transform: skewY(-10deg) rotate(-10deg) translateX(50%);
  }
  100% {
        transform: skewY(-10deg) rotate(-10deg) translateX(0%);
  }
}
    

首先，我们创建一个 div 包裹着曲线。我们使用 :before 伪元素来创建一个白色的块作为曲线，并使用 transform 属性将其旋转和倾斜，使得其成为一条曲线。

我们使用 cubic-bezier() 函数来控制曲线的形状。

然后，我们使用 transform-origin 属性来指定变换的基点，这里我们使用中心点和顶部点的交点。

最后，我们使用动画实现曲线的移动。

以上就是使用 CSS 实现一条曲线的方法。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！