如何用CSS贝塞尔曲线绘制平滑曲线动画？-css教程-PHP中文网

如何用CSS贝塞尔曲线绘制平滑曲线动画？

花韻仙語

发布： 2025-02-24 20:28:01

原创

376人浏览过

如何用css贝塞尔曲线绘制平滑曲线动画？

CSS贝塞尔曲线：打造流畅动画效果

本文将演示如何利用CSS的贝塞尔曲线功能，创建如上图所示的平滑曲线动画。

贝塞尔曲线参数获取

为了精确控制曲线形状，建议使用在线贝塞尔曲线工具获取曲线控制点坐标。许多网站提供此类工具，方便您输入所需曲线形状并获得相应的坐标值。(例如：贝塞尔曲线在线工具)

立即学习“前端免费学习笔记（深入）”；

CSS代码实现

获得控制点坐标后，即可使用CSS的cubic-bezier()函数或SVG的path元素来定义贝塞尔曲线。

方法一：使用cubic-bezier() (适用于简单的曲线)

豆绘AI

豆绘AI是国内领先的AI绘图与设计平台，支持照片、设计、绘画的一键生成。

485

查看详情

cubic-bezier()函数定义一个三次贝塞尔曲线，参数为四个值，分别代表曲线控制点的x和y坐标（范围0-1）。此方法适合相对简单的曲线。

方法二：使用SVG path元素 (适用于复杂的曲线)

对于更复杂的曲线，SVG的path元素提供了更强大的控制能力。 path元素使用一系列指令来定义路径，包括移动指令（M）、曲线指令（C）等。 C指令后跟六个参数，分别为两个控制点和终点的x和y坐标。

以下代码示例演示了使用path元素创建动画：

<code class="css">border: 1px solid black;
border-radius: 50%;
animation: rotation 3s infinite;

@keyframes rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pathAnimation {
  0% { stroke-dashoffset: 500; }
  100% { stroke-dashoffset: 0; }
}

path {
  stroke: black;
  stroke-width: 5;
  stroke-dasharray: 500;
  animation: pathAnimation 3s infinite;
  animation-delay: 1s;
  /*  替换为从贝塞尔曲线工具获得的路径数据 */
  d: path("M150 150 C 275 150, 275 250, 150 250 C 25 250, 25 150, 150 150"); 
}</code>

登录后复制

这段代码中，d属性的值定义了贝塞尔曲线的路径。请将 "M150 150 C 275 150, 275 250, 150 250 C 25 250, 25 150, 150 150" 替换为您从贝塞尔曲线工具获取的实际路径数据。 stroke-dasharray和stroke-dashoffset属性配合pathAnimation动画实现了沿着路径的绘制效果。

通过调整控制点坐标和动画参数，您可以创建各种形状和动画效果的平滑曲线。记住，使用合适的工具获取精确的曲线参数是关键。

以上就是如何用CSS贝塞尔曲线绘制平滑曲线动画？的详细内容，更多请关注php中文网其它相关文章！