效果图来自高德API官网
svg标签实际就是将多个图片进行拼接,然后其中某个元素运动
//viewBox="0 0 1920 480" 画布大小 此单位不是PX 他是根据svg大小分隔成1920份*480 份
<svg id="svg1" viewBox="0 0 1920 480" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="2540"style="width: 100%;height: 100%;">
//matrix(1,0,0,1,940,15) 最后两个数是 X,Y轴位置 左上角为0,0
<g class="bg" transform="matrix(1,0,0,1,940,15)" opacity="1">
<image width="698.5px" height="427.5px" preserveaspectratio="xMidYMid slice"
xlink:href="img/banner/bg.png"></image>
</g>
<g class="feiji" transform="matrix(1,0,0,1,1215,138)" opacity="1">
<image width="283.5px" height="199.5px" preserveaspectratio="xMidYMid slice"
xlink:href="img/banner/1.png"></image>
</g>
</svg>
<scrpit>
// dom选择器 动画时间 y轴位置 重复
TweenMax.to('#svg1 .feiji', 2.5, {y:120,repeat:-1,yoyo:true});
</scrpit>
TweenMax 插件可实现动态 改变 X,Y轴位置和透明度 等等
点这里官网