Question

我使用mask和filter复制了this效果。

这就是我所做的：

在两个不同的mask元素上应用了两个text，一个在左侧用于模糊文本，一个在右侧用于普通文本。
为mask和ellipse设置动画以获得最终效果。

一切正常，但动画在Firefox上滞后。有没有办法让动画流畅？

body, html {
  height: 100%;
  margin: 0;
  background: -webkit-radial-gradient(center, ellipse, #300 10%, #000 100%);
  background: -moz-radial-gradient(center, ellipse, #300 10%, #000 100%);
  background: radial-gradient(center, ellipse, #300 10%, #000 100%);
}
svg {
  position: relative;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<svg width="100%" height="200" viewBox="0 0 700 200">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
    </filter>
    <mask id="mask-left" maskUnits="userSpaceOnUse" x="0" y="0" width="700" height="200">
      <path id="d1" d="M0,30 h0 c-35,15 -35,125 0,140 h0z" fill="white" />
      <animate xlink:href="#d1" attributeType="XML" attributeName="d" from="M0,30 h0 c-35,15 -35,125 0,140 h-0z" to="M0,30 h700 c-35,15 -35,125 0,140 h-700z" dur="10s" repeatCount="indefinite" />
    </mask>
    <mask id="mask-right" maskUnits="userSpaceOnUse" x="0" y="0" width="700" height="200">
      <path id="d2" d="M700,30 h-672 c-35,15 -35,125 0,140 h672z" fill="white" />
      <animate xlink:href="#d2" attributeType="XML" attributeName="d" from="M700,30 h-700 c-35,15 -35,125 0,140 h700z" to="M700,30 h0 c-35,15 -35,125 0,140 h0z" dur="10s" repeatCount="indefinite" />
    </mask>
  </defs>
  <text mask="url(#mask-right)" x="350" y="120" fill="white" text-anchor="middle" font-size="50" font-family="Ubuntu">Magic of Filter and Masking</text>
  <text mask="url(#mask-left)" filter="url(#blur)" x="350" y="120" fill="white" text-anchor="middle" font-size="50" font-family="Ubuntu">Magic of Filter and Masking</text>
  <ellipse id="e" cx="26" cy="100" rx="25" ry="70" fill="none" stroke="#600" stroke-width="2" />
  <animate xlink:href="#e" attributeType="XML" attributeName="cx" from="0" to="700" dur="10s" repeatCount="indefinite" />
</svg>

Answer 1

我在不同的浏览器中看过你的svg动画。但它在FireFox和Chrome中没有任何滞后，但在Internet Explorer中根本不起作用。

也许可以使用Fakesmile，Internet Explorer支持此功能。

Firefox上的Laggy动画

1 个答案: