留下衰落轨迹的偏移路径

Question

我需要包括什么才能在它后面留下白色痕迹？ 我尝试添加 10 个跨度并为它们提供相同的路径并延迟每个跨度，但它看起来太离谱了。

 .container{ width: 100vw; height: 100vh; background: gray; }.orb{ background: #00fff9; offset-path: path( "M257.004 129.794C321.128 129.794 380.697 139.056 425.611 154.622C479.727 173.378 513 201.806 513 227.548C513 254.373 477.738 284.575 419.624 303.958C375.689 318.612 317.874 326.262 257.004 326.262C194.596 326.262 135.5 319.081 91.0694 303.797C34.8572 284.455 1 253.863 1 227.548C1 202.015 32.7685 173.806 86.1237 155.079C131.206 139.257 192.246 129.794 256.996 129.794H257.004Z" ); box-shadow: 0 0 10px #00fff9, 0 0 20px #00fff9, 0 0 30px #00fff9, 0 0 40px #00fff9, 0 0 50px #00fff9, 0 0 60px #00fff9, 0 0 70px #00fff9, 0 0 80px #00fff9, 0 0 90px #00fff9; border-radius: 50%; width: 20px; height: 20px; animation: move 10s linear infinite; } @keyframes move { 100% { offset-distance: 100%; } }

 <div class="container"> <div class="orb"> </div> </div>

Answer 1

这是一个使用 SVG <animateMotion>而不是 CSS offset-path的实现。 （路径数据可能看起来有点不同，但它们基本相同。）

轨迹使用stroke-dashoffset animation 完成。路径获得pathLength="100" ，然后绘制十次，每次都使用stroke-dasharray="2 98" 。 这样，沿着路径只绘制一条长度为 2 of 100 的破折号。

然后，路径的 10 个副本中的每一个都获得一个渐变的不透明度，并且它的stroke-dashoffset是动画的，使得它们一个接一个地定位并在发光的球体后面移动。 不可否认，该部分有点冗长，因为您需要为每个副本编写单独的 animation 规则。 然后将它们全部组合起来模糊以使其平滑。

对于球体，使用自定义 SVG 过滤器，因为投影属性不能直接用于 SVG 图形。

 svg { background-color: grey; overflow: visible; width: 100vw; height: 100vh; }.orb { fill: #00fff9; }.orb:first-child { filter: url(#glow); }.trail { filter: blur(4px); }.trail use { fill: none; stroke: white; stroke-width: 10; stroke-dasharray: 2 98; }.trail:nth-child(1) { animation: trail1 10s linear infinite; stroke-opacity: 0.5; } @keyframes trail1 { from {stroke-dashoffset: 2} to {stroke-dashoffset: -98} }.trail:nth-child(2) { animation: trail2 10s linear infinite; stroke-opacity: 0.45; } @keyframes trail2 { from {stroke-dashoffset: 4} to {stroke-dashoffset: -96} }.trail:nth-child(3) { animation: trail3 10s linear infinite; stroke-opacity: 0.4; } @keyframes trail3 { from {stroke-dashoffset: 6} to {stroke-dashoffset: -94} }.trail:nth-child(4) { animation: trail4 10s linear infinite; stroke-opacity: 0.35; } @keyframes trail4 { from {stroke-dashoffset: 8} to {stroke-dashoffset: -92} }.trail:nth-child(5) { animation: trail5 10s linear infinite; stroke-opacity: 0.3; } @keyframes trail5 { from {stroke-dashoffset: 10} to {stroke-dashoffset: -90} }.trail:nth-child(6) { animation: trail6 10s linear infinite; stroke-opacity: 0.25; } @keyframes trail6 { from {stroke-dashoffset: 12} to {stroke-dashoffset: -88} }.trail:nth-child(7) { animation: trail7 10s linear infinite; stroke-opacity: 0.2; } @keyframes trail7 { from {stroke-dashoffset: 14} to {stroke-dashoffset: -86} }.trail:nth-child(8) { animation: trail8 10s linear infinite; stroke-opacity: 0.15; } @keyframes trail8 { from {stroke-dashoffset: 16} to {stroke-dashoffset: -84} }.trail:nth-child(9) { animation: trail9 10s linear infinite; stroke-opacity: 0.1; } @keyframes trail9 { from {stroke-dashoffset: 18} to {stroke-dashoffset: -82} }.trail:nth-child(10) { animation: trail10 10s linear infinite; stroke-opacity: 0.05; } @keyframes trail10 { from {stroke-dashoffset: 20} to {stroke-dashoffset: -80} }

 <svg viewBox="-10 110 550 240"> <defs> <filter id="glow" x="-1" y="-1" width="3" height="3"> <feGaussianBlur stdDeviation="12"/><!-- defines how blured the glow is --> <feComponentTransfer> <feFuncA type="linear" slope="3"/><!-- defines how bright the glow is --> </feComponentTransfer> </filter> <path id="ellipse" pathLength="100" d="M257 130A256 98 0 1 1 257 326 256 98 0 1 1 257 130Z" /> </defs> <g class="trail"> <use href="#ellipse"/> <use href="#ellipse"/> <use href="#ellipse"/> <use href="#ellipse"/> <use href="#ellipse"/> <use href="#ellipse"/> <use href="#ellipse"/> <use href="#ellipse"/> <use href="#ellipse"/> <use href="#ellipse"/> </g> <g class="orb"> <circle r="12"/><!-- defines how wide the glow is --> <circle r="10"/> <animateMotion dur="10s" repeatCount="indefinite"> <mpath href="#ellipse"/> </animateMotion> </g> </svg>

您也可以使用<animate>编写 trail animation 。 它看起来像这样：

<use href="#ellipse">
  <animate attributeName="stroke-dashoffset"
           dur="10s" repeatCount="indefinite"
           from="2" to="-98" />
</use>

您使用哪种变体是个人喜好问题。

编辑：概括

上面的代码取决于球体沿路径的线性运动。 你会如何用不同的缓动来解决这个问题？ 我开始探索它，发现唯一现实的方法是从 Javascript 开始逐帧绘制轨迹。可以在Codepen中找到一个示例。