Question

看看这个运球

动画结束时会出现一个带有炫酷效果的绿色条。我想在html中做到这一点。

有关如何实现这一目标的任何建议吗？

Answer 1

是的可能。这是一个示例Elastic SVG，还有很多其他示例和库可用于使用SVG或Canvas元素和javascript创建这些类型的FX。

Answer 2

@ Blindman67给出了一个很好的链接。但它是非常严格的，不可扩展。

但我找到了一些其他很酷的方式。

使用JavaScript更新svg path属性，并使用dynamic.js

为其设置动画

<svg>
  <path fill="#3F51B5" d="M0,0 L320,0 320,160Q160,160 0,160"></path>
</svg>

可以轻松更新＆＃34; d＆＃34;使用jQuery或JavaScript

的属性

检查下面这个小提琴..它用vuejs构建，但它是一个很好的例子。 http://jsfiddle.net/yyx990803/2eg8kbyk/light/

希望它对某人有所帮助。