我正在尝试使用看起来像 this 的 jQuery 复制 f.lux 的视觉效果（抱歉质量差）。基本上，它是一个遵循正弦波路径的圆。我查看了jQuery.path 动画并尝试复制动画，但我的正弦波是不稳定的，因为它是使用 CSS 绘制的。有没有办法绘制正弦波使其平滑，然后按照正弦波路径为圆设置动画？我无法让小提琴工作，但这就是我的动画目前看起来像now。与 f.lux 动画不同，我的动画也不会循环回到它开始的位置。
我也不确定这有什么限制，我是否需要制作 f.lux 的背景（正弦波的蓝色和粉红色两半），然后将动画放在上面，或者我可以制作整个使用 Javascript、CSS 和 jQuery 进行可视化？
有没有人有任何想法或谁能指出我正确的方向？
【问题讨论】：
标签： javascript jquery css jquery-animate
为了让你的线条更流畅，你可以使用 svg 元素，如下所示：
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
<path d="M10 80 C 40 10, 65 20, 95 80" stroke="black" fill="#E0E0E0"/>
<path d="M95 80 C 105 100, 150 150, 180 80" stroke="black" fill="#EEEEEE"/>
</svg>
这使用了两条不同的贝塞尔曲线，因此您可以为背景使用不同的颜色。您将不得不稍微更改这些值以匹配您想要的宽度/高度和曲率。这里有关于 svg 路径的解释：https://developer.mozilla.org/en/docs/Web/SVG/Tutorial/Paths.
如果您无权访问 HTML 源文件，您可以使用 javascript 或 jQuery SVG 创建插入 svg 元素。
【讨论】：