html中如何插入2张水平平行的图片,SVG和CSS3实现的图片平行视差效果

HTML

导入代码模板：

.front {

animation: parallax-front 25s infinite ease-in-out;

filter: url(#effect-1);

}

.mid {

animation: parallax-mid 25s infinite linear;

}

.back {

filter: url(#effect-1);

}

.front,

.mid,

.back {

transform-origin: 50% 50%;

}

@keyframes parallax-front {

0%, 100% {

transform: scale(1);

}

50% {

transform: scale(1.45);

}

}

@keyframes parallax-mid {

0% {

transform: scale(1);

}

50% {

transform: scale(1.2);

}

100% {

transform: scale(1);

}

}

Woodrow Wilson Opens 1913 Season