正弦曲線沿着正弦曲線

-1

我想複製使用jQuery的f.lux的視覺效果，看起來像this（抱歉質量差）。基本上，它是一個正弦波路徑之後的一個圓。我看過jQuery.path動畫，我嘗試複製動畫，但是由於使用CSS繪製正弦波，所以我的正弦波不連貫。有沒有辦法繪製正弦波，使其光滑，然後使正弦波路徑之後的圓圈動起來？我無法獲得小提琴的工作，但這是我的動畫目前看起來像now。與f.lux動畫不同，我的動畫也不會循環回到開始位置。正弦曲線沿着正弦曲線

我不確定這個限制是什麼，我是否需要製作f.lux的背景（正弦波的藍色和粉紅色一半），然後將動畫放在它的頂部，或者我可以使整個視覺使用Javascript，CSS和jQuery？

有沒有人有任何想法，或任何人都可以指向正確的方向嗎？

來源

2016-11-27 D. Simon

爲了讓您更流暢線條，你可以使用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元素。

來源

2016-11-27 18:26:01 Franck

正弦曲線沿着正弦曲線

回答

相關問題