CSS路径运动与裁剪

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .run { 
        width:50px;
        height: 50px;
        background: green;
        display: inline-block; /* 块级元素才可以*/
        animation: move 3s linear infinite;
      offset-path: path("M10,80 q100,120 120,20 q140,-50 160,0");
      offset-rotation:auto -30deg;  /*默认是auto  可以组合属性*/
      transform-origin:top right;
      /*clip-path: inset(0px 0px 0px 0px);*/   /* 裁剪1-1  */

      /*clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /*按路径裁剪  完整的闭合区间*/  /* 裁剪2-1  */

      /* SVG的路径 */
      clip-path: url(#c1);  /* 裁剪3-1  */
    }
    @keyframes move {
      100% { 
          offset-distance: 100%;   /* 运动的距离 从path 0 ~ 100% */

          /*clip-path: inset(10px 10px 20px 30px);*/  /* 裁剪1-2  */
          /*用外向内裁剪 上右下左各裁剪 10px 10px 20px 30px的宽度*/

          /*clip-path: polygon(0 100%, 50% 0, 100% 100%, 0 0);  诡异的蝴蝶图形 */   
          /*clip-path: polygon(0 0, 100% 50%, 100% 50%, 0 100%);  /* 三角形闭合区间 */  /* 裁剪2-2  */

      }
    }
    svg{
        position: absolute;
    }
</style>
<body>

        <svg width="280" height="150" viewBox="0 0 280 150">
            <!-- 画一条可以看见的路径 -->
        <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />

        <!-- 定义一个clippath -->
        <defs>
            <clipPath id="c1">
                <path d="M43.4,50h-7.7c-2.5,0-4.7-2-4.9-4.5l0,0l0-8.1c0,0,0,0,0-0.1s0,0,0-0.1l0,0c0-1.2-1-2.1-2.1-2.2h-7.3
                              c-1.2,0.1-2.1,1.1-2.1,2.2l0,0c0,0,0,0,0,0.1s0,0,0,0.1l0,0.1v8.1l0,0C19,48,16.9,50,14.3,50H6.6c-2.3,0-4.1-1.8-4.1-4.1V27.6
                              c-0.2-0.2-0.3-0.4-0.5-0.6c0-0.1-0.1-0.2-0.2-0.2l0,0c-0.6-1-0.9-1.9-0.9-2.9c0-1.4,0.6-2.7,1.7-3.7l0.3-0.3L21,1.7
                              c1-1,2.4-1.6,3.9-1.7l0,0l0,0c1.5,0,2.9,0.6,3.9,1.7l18.1,18.1l0.3,0.3c1.1,0.9,1.7,2.3,1.7,3.7c0,1-0.3,1.9-0.9,2.9l0,0
                              c-0.1,0.1-0.1,0.2-0.2,0.2c-0.2,0.2-0.3,0.4-0.4,0.6v18.3C47.5,48.1,45.6,50,43.4,50L43.4,50z M33.3,45.3c0.1,1.2,1.1,2.1,2.3"/>
            </clipPath>
            </defs>
    </svg>

    <div class='run'></div>

</body>
</html>
2017-10-15