HtmlSVG 标签实现动态效果
效果图来⾃⾼德APIsvg无损转化为pdf
官⽹
标签实际就是将多个图⽚进⾏拼接，然后其中某个元素运动TweenMax 插件可实现动态 改变 X,Y轴位置和透明度 等等//viewBox="0 0 1920 480" 画布⼤⼩ 此单位不是PX 他是根据svg ⼤⼩分隔成1920份*480 份<svg id ="svg1" viewBox ="0 0 1920 480" version ="1.1" xmlns ="/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 "    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 "  href ="img/banner/1.png "></image > </g ></svg ><scrpit > //    dom 选择器  动画时间 y 轴位置 重复  ('#svg1 .feiji', 2.5, {y:120,repeat:-1,yoyo:true});</scrpit >1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。