在過去的幾個月中，我一直在玩css motion path ，並且在建立演示過程中玩得很開心，您可以在此codepen集合中找到其中的一些示例 。 但是「運動路徑」這個名稱有點誤導，因為它不僅與運動有關。 實際上，儘管規範仍以「運動路徑」作為名稱，但用於定義路徑的屬性已從motion-path更改為offset-path。 原因很容易理解：乙個元素可以放置在路徑上的任何位置， 無論是否運動，其位置（或offset-distance值）都不必設定動畫。
在下面的演示（ @beesandbombs gif的版本）中，動畫化了圓圈的比例和不透明度，但是儘管有運動的幻覺，但它們的位置實際上是固定的。 但是，它們分別使用offset-path和offset-distance沿著圓形路徑定位。
演示位址
（還有乙個conic-gradient蒙版，使用css houdini進行了動畫處理-您需要在chrome中檢視它才能看到效果。）
沿路徑定位固定元素的這種能力非常適合文字。 去年，我建立了一些演示，其中使用css自定義屬性通過變換將文字放置在圓圈上。 本示例使用splitting.js （我最喜歡的js庫！）設定自定義屬性。 （稍後對此有更多介紹。）
演示位址
它可以很好地處理動態內容–您可以更改文字，並且將重新計算每個字元的位置，從而使文字完全適合圓周。 但是有乙個缺點：文字是不可選擇的，因為它使用絕對定位和變換。
如果我們改為使用offset-path，使用自定義屬性為每個字元計算offset-distance值，則可以使用完全可選的文本來達到相同的效果！ 真好！
演示位址
不幸的是，在撰寫本文時，唯一支援的offset-path值是path()函式。 由於路徑無法擴充套件，這使得響應式構建變得不容易。 但是有一些選項，例如使用**查詢為不同的斷點指定不同的路徑值。 或者，我們可以使用轉換在較小的螢幕上縮小整個範圍。 但是這些選擇都不是理想的。 如果我們可以使用svg路徑url（如規範中所述），則可以進行更細粒度的控制。
確定offset-path值的首選方法是在illustrator中繪製路徑並將其儲存為svg，然後再使用優化工具清理路徑並複製結果路徑的d屬性值。 如果僅繪製乙個圓，則illustrator會將其儲存為元素而不是路徑。 防止這種情況的一種方法是，首先繪製圓，然後使用illustrator中的剪刀工具在所需位置切割圓的路徑。 然後將其另存為而不是元素。
當然，我們不僅限於圈子。 我們可以使用我們選擇的任何路徑。
.char
演示位址
有很多的樂趣。 以下演示使用此處介紹的技術建立過山車效果：
演示位址
我們甚至可以變得更奇怪，並在動畫中新增一些3d變換：
演示位址
我希望您能像我一樣喜歡使用motion path！
翻譯自:
C 使用path獲取檔案路徑
using system.io path類的靜態方法 changeextension 更改路徑字串的副檔名。combine string 將字串陣列組合成乙個路徑。combine string,string 將兩個字串組合成乙個路徑。combine string,string,string 將三個字...
C語言中相對路徑的使用
在c語言實踐中，我們經常需要讀取與當前程式檔案在同一根目錄下的其它檔案或資料夾中的內容，這就需要用到相對路徑。c語言中的相對路徑 相對 麻煩，現舉例如下 假設程式源 檔案在c code practise 路徑下，我們需要讀取c code practise text 資料夾中的檔案0.txt，怎樣設定...
c語言中使用相對路徑
1 c程式執行在windows下 file fp fopen input inputa.txt r 當前目錄 file fp fopen input inputa.txt r 表示當前目錄 可省略 file fp fopen input inputa.txt r 表示返回上一級目錄 file fp ...