.left-svg { position: relative; top: -36%; left: 33%; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: heartbeatLeft 2s linear infinite; } @keyframes heartbeatLeft { 0% { stroke-dashoffset: 1000; } 20% { stroke-dashoffset: 800; } 40% { stroke-dashoffset: 600; } 60% { stroke-dashoffset: 400; } 80% { stroke-dashoffset: 200; } 100% { stroke-dashoffset: 0; } } 这段动画改为从右到左显示

要将这段动画改为从右到左显示，需要将.left-svg元素的left属性值改为负值，同时将stroke-dashoffset属性值的变化反转，具体修改如下：

.left-svg {
position: relative;
top: -36%;
left: -33%; /* 将left属性值改为负值 */
stroke-dasharray: 1000;
stroke-dashoffset: 0; /* 将stroke-dashoffset属性值的初始值改为0 */
animation: heartbeatRight 2s linear infinite; /* 将动画名称改为heartbeatRight */
}

@keyframes heartbeatRight {
0% {
stroke-dashoffset: 0;
}
20% {
stroke-dashoffset: 200;
}
40% {
stroke-dashoffset: 400;
}
60% {
stroke-dashoffset: 600;
}
80% {
stroke-dashoffset: 800;
}
100% {
stroke-dashoffset: 1000;
}
}

相关问题

使用svg+div来画一个流程图模板

可以使用以下 HTML、CSS 和 SVG 代码来画一个简单的流程图模板：

<div style="position: relative; width: 400px; height: 200px;">
  <!-- 第一个矩形 -->
  <svg viewBox="0 0 100 100" style="position: absolute; left: 20px; top: 20px;">
    <rect x="0" y="0" width="100" height="100" fill="#f00" />
    <text x="50" y="60" font-size="16" text-anchor="middle" fill="#fff">步骤1</text>
  </svg>
  <!-- 第二个矩形 -->
  <svg viewBox="0 0 100 100" style="position: absolute; left: 150px; top: 20px;">
    <rect x="0" y="0" width="100" height="100" fill="#0f0" />
    <text x="50" y="60" font-size="16" text-anchor="middle" fill="#fff">步骤2</text>
  </svg>
  <!-- 第三个矩形 -->
  <svg viewBox="0 0 100 100" style="position: absolute; left: 280px; top: 20px;">
    <rect x="0" y="0" width="100" height="100" fill="#00f" />
    <text x="50" y="60" font-size="16" text-anchor="middle" fill="#fff">步骤3</text>
  </svg>
  <!-- 箭头线1 -->
  <svg viewBox="0 0 400 200" style="position: absolute; left: 0; top: 0;">
    <line x1="70" y1="70" x2="150" y2="70" stroke="#000" stroke-width="2" marker-end="url(#arrow)" />
    <defs>
      <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto" markerUnits="strokeWidth">
        <path d="M0,0 L0,10 L8,5 z" fill="#000" />
      </marker>
    </defs>
  </svg>
  <!-- 箭头线2 -->
  <svg viewBox="0 0 400 200" style="position: absolute; left: 0; top: 0;">
    <line x1="200" y1="70" x2="280" y2="70" stroke="#000" stroke-width="2" marker-end="url(#arrow)" />
    <defs>
      <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto" markerUnits="strokeWidth">
        <path d="M0,0 L0,10 L8,5 z" fill="#000" />
      </marker>
    </defs>
  </svg>
</div>

其中，`div` 元素用来创建包裹 SVG 元素的容器，`position: relative;` 属性用来指定容器的定位方式，`width` 和 `height` 属性用来指定容器的大小。每个 SVG 元素用来创建矩形或箭头线，`viewBox` 属性用来指定 SVG 的视口大小和位置，`style` 属性用来指定 SVG 元素的定位方式和位置。矩形内部使用了 `rect` 元素和 `text` 元素，`x` 和 `y` 属性用来指定文本的位置，`font-size` 属性用来指定文本的大小，`text-anchor` 属性用来指定文本的对齐方式。箭头线用 `line` 元素来创建，`x1` 和 `y1` 属性指定了线条的起点坐标，`x2` 和 `y2` 属性指定了线条的终点坐标，`stroke` 属性指定了线条的颜色，`stroke-width` 属性指定了线条的宽度，`marker-end` 属性指定了箭头的位置和方向。箭头的形状定义方式与前面的示例相同。

使用svg+div来画两个长方形中间用箭头线连接

可以使用以下 HTML、CSS 和 SVG 代码来画两个长方形中间用箭头线连接：

<div style="position: relative; width: 200px; height: 100px;">
  <!-- 第一个长方形 -->
  <svg viewBox="0 0 100 100" style="position: absolute; left: 20px; top: 20px;">
    <rect x="0" y="0" width="100" height="100" fill="#f00" />
  </svg>
  <!-- 第二个长方形 -->
  <svg viewBox="0 0 100 100" style="position: absolute; left: 120px; top: 20px;">
    <rect x="0" y="0" width="100" height="100" fill="#0f0" />
  </svg>
  <!-- 箭头线 -->
  <svg viewBox="0 0 200 100" style="position: absolute; left: 0; top: 0;">
    <line x1="80" y1="50" x2="120" y2="50" stroke="#00f" stroke-width="2" marker-end="url(#arrow)" />
    <!-- 定义箭头 -->
    <defs>
      <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto" markerUnits="strokeWidth">
        <path d="M0,0 L0,10 L8,5 z" fill="#00f" />
      </marker>
    </defs>
  </svg>
</div>

其中，`div` 元素用来创建包裹 SVG 元素的容器，`position: relative;` 属性用来指定容器的定位方式，`width` 和 `height` 属性用来指定容器的大小。每个 SVG 元素用来创建长方形或箭头线，`viewBox` 属性用来指定 SVG 的视口大小和位置，`style` 属性用来指定 SVG 元素的定位方式和位置。箭头线的 SVG 元素需要放在最后面，以便覆盖前面的 SVG 元素。

需要注意的是，SVG 元素默认是 inline 元素，无法设置宽度和高度，需要用 CSS 的 `position` 属性和 `left`、`top` 属性来控制位置和大小。