如何使css運動路徑響應？

Question

我製作了從運球的原始鏡頭的原型。在css中定義的路徑上移動圖像。路徑是在插畫中創建的。我如何使運動路徑根據屏幕大小調整其大小。

CodePen

代碼示例

.el-1 { 
    top: 6%; 
    left: 5%; 
    motion-path: path('M0.1,0.5c0,0,115.7,24.9,133,122.6'); 
    offset-path: path('M0.1,0.5c0,0,115.7,24.9,133,122.6'); 
    /*motion-offset: 0%;*/ 
    animation: pathy 1.2s 1 ease-in; 
    animation-delay: 1.60s; 
} 

Answer 1

您可以通過使用寬度％和高度爲VH使其

例子：

max-width: 100%; 
min-height: 100vh; 

這裏有一個codepen with a responsive motion path

Answer 2

對於視口寬度，您可以使用vh來獲取viewport height和vw，或者您可以使用百分比。

.el-1 { 
top: 6%; 
left: 5%; 
motion-path: path('M0.1,0.5c0,0,115.7,24.9,133,122.6'); 
offset-path: path('M0.1,0.5c0,0,115.7,24.9,133,122.6'); 
/*motion-offset: 0%;*/ 
animation: pathy 1.2s 1 ease-in; 
animation-delay: 1.60s; 
height: 20vh; 
width: 20vw; // or auto, or % 
}