清明上河图 --- SVG 长卷画面无缝连续滚动的尝试
<div id="blkx" style="position:relative;width:100%;height:auto !important;min-height:540px; position:relative;overflow:hidden; border-radius:16px;"></div>
<script type="text/javascript">
var doctxt = "%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20%0Aversion%3D%221.1%22%20viewBox%3D%220%200%201000%20650%22%3E%0A%0A%3C%21--%0A%u4EE5%u5DE6%u4E0A%u89D2%u4E3A%u539F%u70B9%u66F4%u4E3A%u7B80%u5355%0Ax%20%3D%20-width%2C%20y%20%3D%20height%2C%20from%20%3D%20y%2C%20to%20%3D%20-height%0A--%3E%0A%0A%3Cg%20transform%3D%22rotate%28-90%29%22%3E%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOu2CD.jpg%22%20%0Aopacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22-650%22%20y%3D%220%22%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p0.begin%22%3E%3C/set%3E%0A%3Canimate%20id%3D%22p0%22%20attributeName%3D%22y%22%20from%3D%220%22%20to%3D%22-1332%22%20begin%3D%220%3B%20pg.end+0.05%22%20dur%3D%2213.32%22%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p0.end%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuR8e.jpg%22%20%0Aopacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22-650%22%20y%3D%221000%22%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p0.begin+3.32%22%3E%3C/set%3E%0A%3Canimate%20id%3D%22p1%22%20attributeName%3D%22y%22%20from%3D%221000%22%20to%3D%22-1332%22%20begin%3D%22p0.begin+3.32%22%20dur%3D%2223.32%22%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p1.end%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOufvd.jpg%22%20%0Aopacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22-650%22%20y%3D%221000%22%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p1.end-10%22%3E%3C/set%3E%0A%3Canimate%20id%3D%22p2%22%20attributeName%3D%22y%22%20from%3D%221000%22%20to%3D%22-1332%22%20begin%3D%22p1.end-10%22%20dur%3D%2223.32%22%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p2.end%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuWgH.jpg%22%20%0Aopacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22-650%22%20y%3D%271000%27%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p2.end-10%22%3E%3C/set%3E%0A%3Canimate%20id%3D%22p3%22%20attributeName%3D%22y%22%20from%3D%271000%27%20to%3D%22-1332%22%20begin%3D%22p2.end-10%22%20dur%3D%2723.32%27%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p3.end%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuc4O.jpg%22%20%0Aopacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22-650%22%20y%3D%271000%27%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p3.end-10%22%3E%3C/set%3E%0A%3Canimate%20id%3D%22p4%22%20attributeName%3D%22y%22%20from%3D%271000%27%20to%3D%22-1332%22%20begin%3D%22p3.end-10%22%20dur%3D%2723.32%27%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p4.end%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOu4KA.jpg%22%20%0Aopacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22-650%22%20y%3D%271000%27%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p4.end-10%22%3E%3C/set%3E%0A%3Canimate%20id%3D%22p5%22%20attributeName%3D%22y%22%20from%3D%271000%27%20to%3D%22-1332%22%20begin%3D%22p4.end-10%22%20dur%3D%2723.32%27%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p5.end%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuTVP.jpg%22%20%0Aopacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22-650%22%20y%3D%271000%27%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p5.end-10%22%3E%3C/set%3E%0A%3Canimate%20id%3D%22p6%22%20attributeName%3D%22y%22%20from%3D%271000%27%20to%3D%22-1332%22%20begin%3D%22p5.end-10%22%20dur%3D%2723.32%27%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p6.end%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOu5DI.jpg%22%20%0Aopacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22-650%22%20y%3D%271000%27%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p6.end-10%22%3E%3C/set%3E%0A%3Canimate%20id%3D%22p7%22%20attributeName%3D%22y%22%20from%3D%271000%27%20to%3D%22-1332%22%20begin%3D%22p6.end-10%22%20dur%3D%2723.32%27%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p7.end%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuIbt.jpg%22%20%0Aopacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22-650%22%20y%3D%271000%27%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p7.end-10%22%3E%3C/set%3E%0A%3Canimate%20id%3D%22p8%22%20attributeName%3D%22y%22%20from%3D%271000%27%20to%3D%22-1332%22%20begin%3D%22p7.end-10%22%20dur%3D%2723.32%27%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p8.end%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuqPS.jpg%22%20%0Aopacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22-650%22%20y%3D%271000%27%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p8.end-10%22%3E%3C/set%3E%0A%3Canimate%20id%3D%22p9%22%20attributeName%3D%22y%22%20from%3D%271000%27%20to%3D%22-1332%22%20begin%3D%22p8.end-10%22%20dur%3D%2723.32%27%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p9.end%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOu7Uf.jpg%22%20%0Aopacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22-650%22%20y%3D%271000%27%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p9.end-10%22%3E%3C/set%3E%0A%3Canimate%20id%3D%22pa%22%20attributeName%3D%22y%22%20from%3D%271000%27%20to%3D%22-1332%22%20begin%3D%22p9.end-10%22%20dur%3D%2723.32%27%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22pa.end%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuL8g.jpg%22%20%0Aopacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22-650%22%20y%3D%271000%27%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22pa.end-10%22%3E%3C/set%3E%0A%3Canimate%20id%3D%22pb%22%20attributeName%3D%22y%22%20from%3D%271000%27%20to%3D%22-1332%22%20begin%3D%22pa.end-10%22%20dur%3D%2723.32%27%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22pb.end%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuO2Q.jpg%22%20%0Aopacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22-650%22%20y%3D%271000%27%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22pb.end-10%22%3E%3C/set%3E%0A%3Canimate%20id%3D%22pc%22%20attributeName%3D%22y%22%20from%3D%271000%27%20to%3D%22-1332%22%20begin%3D%22pb.end-10%22%20dur%3D%2723.32%27%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22pc.end%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuXvj.jpg%22%20%0Aopacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22-650%22%20y%3D%271000%27%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22pc.end-10%22%3E%3C/set%3E%0A%3Canimate%20id%3D%22pd%22%20attributeName%3D%22y%22%20from%3D%271000%27%20to%3D%22-1332%22%20begin%3D%22pc.end-10%22%20dur%3D%2723.32%27%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22pd.end%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuvKs.jpg%22%20%0Aopacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22-650%22%20y%3D%271000%27%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22pd.end-10%22%3E%3C/set%3E%0A%3Canimate%20id%3D%22pe%22%20attributeName%3D%22y%22%20from%3D%271000%27%20to%3D%22-1332%22%20begin%3D%22pd.end-10%22%20dur%3D%2723.32%27%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22pe.end%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuxrn.jpg%22%20%0Aopacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22-650%22%20y%3D%271000%27%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22pe.end-10%22%3E%3C/set%3E%0A%3Canimate%20id%3D%22pf%22%20attributeName%3D%22y%22%20from%3D%271000%27%20to%3D%22-1332%22%20begin%3D%22pe.end-10%22%20dur%3D%2723.32%27%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22pf.end%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOu2CD.jpg%22%20%0Aopacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22-650%22%20y%3D%221000%22%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22pf.end-10%22%3E%3C/set%3E%0A%3Canimate%20id%3D%22pg%22%20attributeName%3D%22y%22%20from%3D%221000%22%20to%3D%220%22%20begin%3D%22pf.end-10%22%20dur%3D%2210%22%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22pg.end%22%3E%3C/set%3E%0A%3C/image%3E%0A%3C/g%3E%0A%3C/svg%3E";
var blk = document.querySelector('#blkx');
blk.innerHTML = unescape(doctxt);
</script>
<audio src="https://mp3.9ku.com/hot/2010/05-27/289176.mp3" loop autoplay ></audio>
教科书式的精彩大作，欣赏、学习！
首图与其后各图开始滾动时间的设定很是巧妙！
g标签的使用恰到好处！
赞！赞！！赞！！！
创新让作品更精彩！！！
为195400老师的作品点赞！！！
在我这里，用360安全浏览器和QQ、Edge、Chrome浏览器均可无缝循环播放。
西椅子胡同 发表于 2021-9-10 14:15
教科书式的精彩大作，欣赏、学习！
http://www.yinhuabbs.cn/data/attachment/forum/201912/21/084215njp5lwls4o0j7pno.gif
西椅子胡同 发表于 2021-9-10 14:26
创新让作品更精彩！！！
如果是宽幅图片CSS动画要容易些，处理需要转向的图片SVG有独特之处，这个练习主要还是图片的转向。 西椅子胡同 发表于 2021-9-10 14:50
在我这里，用360安全浏览器和QQ、Edge、Chrome浏览器均可无缝循环播放。
http://www.yinhuabbs.cn/data/attachment/forum/201912/20/123059ffon6y9p6tnedvne.gif
195400 发表于 2021-9-10 16:16
如果是宽幅图片CSS动画要容易些，处理需要转向的图片SVG有独特之处，这个练习主要还是图片的转向。
是的，见过您用css实现无缝连续滾动的帖子。竖发宽图实现水平滾动就要解决图片转向问题，图片转向后的图片定位（特别是不同幅面图片在转向后的定位）也要解决好。您做的很好！
西椅子胡同 发表于 2021-9-10 17:38
是的，见过您用css实现无缝连续滾动的帖子。竖发宽图实现水平滾动就要解决图片转向问题，图片转向后的图 ...
<script type="text/javascript">
var lxtxt =[">lmth/<",
'>vid/<>naps/<！赞点你为，习学，赏欣>"体宋仿 me3 dlob:tnof;%081:thgieh-enil;)fig.QmOvhh/60/90/1202/moc.x1xa.3z//:sptth(lru:egami-dnuorgkcab;)0,0,552(bgr xp1 :ekorts-txet-tikbew-;tnerapsnart:roloc-llif-txet-tikbew-;txet:pilc-dnuorgkcab-tikbew-"=elyts naps<',
'>";evitaler : noitisop ;%081:thgieh-enil ;retnec:ngila-txet ;xp05: pot-gniddap ;otua xp0 : nigram ;xp053:thgieh;%001:htdiw"=elyts vid<'];
var linelen = lxtxt.length;
var txtStr = '';
for(n = linelen - 1; n >=0; n--) {
var linetxt = lxtxt;
for(j = linetxt.length - 1; j>=0;j--) {
txtStr += linetxt.charAt(j);
}
}
document.write(txtStr);
</script>
页:
[1]
2