利用路径动画实现不规则（曲线等）动画

zzx-sll

于 2023-12-21 11:45:32 发布

阅读量429

点赞数 9

文章标签：前端

本文链接：https://blog.csdn.net/myyrx/article/details/135125968

版权

利用路径动画实现不规则（曲线等）动画

原理：使用 offset-path属性来定义运动路径，语法如下：

 offset-path:path(path)
 path描述元素的运动路径，可以利用工具画出你想要的路径然后直接复制，也可以手动定义。

首先定义一个元素为运动的元素我这里定义了一个三角形
利用offset-path描述元素运动路径
定义动画动画属性中定义 offset-distance描述运动的距离
-完整代码如下：

/* style代码 */
 .box{
  position: relative;
  width: 100%;
  height: 100%;
 }
 .my-svg{
  position: absolute;
  left: 0;
  top: 0;
 }
 .trangle{
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  /* 裁剪为三角形  polygon()闭合形状*/
  clip-path: polygon(0 0,100% 50%,0 100%);
  /*  */
  background:linear-gradient(
     to bottom,
    transparent 0%,
    pink 10%,
    orange 30%,
    lightgreen 80%,
    lightblue 100%
    
  ) ;
  offset-path: path("M 100 250 Q 100 400 150 400 Q 200 400 200 250 Q 200 170 250 150 Q 300 160 320 250 Q 355 325 390 400 A 20 50 0 1 1 470 250 A 50 50 0 1 1 480 240 ");

  animation: motionA 8s linear  infinite alternate ;
 }

 @keyframes motionA {
  100%{
    offset-distance: 100%;
  }

/* html代码*/
<body>
 <div class="box">
  <!-- svg -->
  <svg class="my-svg" width="100%" height="600px"  xmlns="http://www.w3.org/2000/svg"  >
    <path stroke="black" fill="transparent" d="M 100 250 Q 100 400 150 400 Q 200 400 200 250 Q 200 170 250 150 Q 300 160 320 250 Q 355 325 390 400 A 20 50 0 1 1 470 250 A 50 50 0 1 1 480 240 "> 
    </path>
  </svg>

  <!-- ball -->
         <div class="trangle"></div>
 </div>
  

</body>