我试图使用jQuery复制f.lux的视觉效果，看起来像this（抱歉质量很差）。基本上，它是一个遵循正弦波路径的圆。我查看了jQuery.path动画，我尝试复制动画，但我的正弦波是不稳定的，因为它是使用CSS绘制的。有没有办法绘制正弦波，使其平滑，然后在正弦波路径后为圆圈设置动画？我无法使用小提琴，但这就是我的动画目前的样子now。与f.lux动画不同，我的动画也不会循环回到它的启动位置。
我不确定这个限制是什么，我是否需要制作f.lux的背景（正弦波的蓝色和粉红色的一半）然后将动画放在它上面或者我可以制作整个使用Javascript，CSS和jQuery进行可视化？
有人有任何想法，或者有人能指出我正确的方向吗？
答案 0 :(得分：0)
为了让你的线条更流畅，你可以使用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元素。