Question

我制作了一个原始镜头的原型。在css中定义的路径上移动图像。路径是在插画家中创建的。如何根据屏幕尺寸调整运动路径的大小。

代码示例

.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

您可以使用class Form extends Component { render() { return ( <form onSubmit={this.props.handleSubmit} onChange={() => console.log(this.props.dirty)}> {this.props.children} </form> ) } } export default reduxForm({form: 'form'})(Form) vh和viewport height作为视口宽度，也可以使用百分比。

vw

如何使css运动路径响应？

2 个答案: