如何使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 % 
}