江山如画

蒲公英

欣赏朋友佳作！

夕阳黄昏

娟子 发表于 2022-3-29 10:43
欣赏老师佳作---江山如画，图片移动非常顺畅平稳 ，点赞！

夕阳黄昏

蒲公英 发表于 2022-3-29 10:44
欣赏朋友佳作！

沪上人

欣赏学习！谢谢介绍分享！

夕阳黄昏

沪上人 发表于 2022-3-29 19:12
欣赏学习！谢谢介绍分享！

松柏一

欣赏老师精彩音画，学习了

夕阳黄昏

松柏一 发表于 2022-3-29 19:55
欣赏老师精彩音画，学习了

醉美水芙蓉

老师这个贴是把代码隐藏了吗？

夕阳黄昏

湛蓝 发表于 2022-3-28 08:37
大气，画面清晰，色彩协调

不是有意隐藏，svg代码中的图片链接会被论坛过滤掉，这样写则不会。画面部分代码

1. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1000 600">
   
2. 
   
3. <g transform="rotate(-90)">
   
4. <image xlink:href="https://s1.ax1x.com/2022/03/27/qwHcWQ.jpg" width="600" height="9078" opacity="0" x="-600" y="0" preserveAspectRatio="none">
   
5. <set attributeName="opacity" to="1" begin="p0.begin"></set>
   
6. <animate id="p0" attributeName="y" from="0" to="-9078" begin="0; p7.end" dur="90.78" fill="freeze"></animate>
   
7. <set attributeName="opacity" to="0" begin="p0.begin+90.78"></set>
   
8. </image>
   
9. 
   
10. <image xlink:href="https://s1.ax1x.com/2022/03/27/qwHgzj.jpg" width="600" height="10955" opacity="0" x="-600" y="1000" preserveAspectRatio="none">
    
11. <set attributeName="opacity" to="1" begin="p1.begin"></set>
    
12. <animate id="p1" attributeName="y" from="1000" to="-10955" begin="p0.end-10" dur="119.55" fill="freeze"></animate>
    
13. <set attributeName="opacity" to="0" begin="p1.begin+119.55"></set>
    
14. </image>
    
15. 
    
16. 
    
17. <image xlink:href="https://s1.ax1x.com/2022/03/27/qwH6Jg.jpg" width="600" height="7400" opacity="0" x="-600" y="1000" preserveAspectRatio="none">
    
18. <set attributeName="opacity" to="1" begin="p2.begin"></set>
    
19. <animate id="p2" attributeName="y" from="1000" to="-7400" begin="p1.end-10" dur="84" fill="freeze"></animate>
    
20. <set attributeName="opacity" to="0" begin="p2.begin+84"></set>
    
21. </image>
    
22. 
    
23. <image xlink:href="https://s1.ax1x.com/2022/03/27/qwHyFS.jpg" width="600" height="7400" opacity="0" x="-600" y="1000" preserveAspectRatio="none">
    
24. <set attributeName="opacity" to="1" begin="p3.begin"></set>
    
25. <animate id="p3" attributeName="y" from="1000" to="-7400" begin="p2.end-10" dur="84" fill="freeze"></animate>
    
26. <set attributeName="opacity" to="0" begin="p3.begin+84"></set>
    
27. </image>
    
28. 
    
29. <image xlink:href="https://s1.ax1x.com/2022/03/27/qwHro8.jpg" width="600" height="8768" opacity="0" x="-600" y="1000" preserveAspectRatio="none">
    
30. <set attributeName="opacity" to="1" begin="p4.begin"></set>
    
31. <animate id="p4" attributeName="y" from="1000" to="-8768" begin="p3.end-10" dur="97.68" fill="freeze"></animate>
    
32. <set attributeName="opacity" to="0" begin="p4.begin+97.68"></set>
    
33. </image>
    
34. 
    
35. <image xlink:href="https://s1.ax1x.com/2022/03/27/qwHWyn.jpg" width="600" height="6320" opacity="0" x="-600" y="1000" preserveAspectRatio="none">
    
36. <set attributeName="opacity" to="1" begin="p5.begin"></set>
    
37. <animate id="p5" attributeName="y" from="1000" to="-6320" begin="p4.end-10" dur="73.2" fill="freeze"></animate>
    
38. <set attributeName="opacity" to="0" begin="p5.begin+73.2"></set>
    
39. </image>
    
40. 
    
41. <image xlink:href="https://s1.ax1x.com/2022/03/27/qwHRQs.jpg" width="600" height="5655" opacity="0" x="-600" y="1000" preserveAspectRatio="none">
    
42. <set attributeName="opacity" to="1" begin="p6.begin"></set>
    
43. <animate id="p6" attributeName="y" from="1000" to="-5655" begin="p5.end-10" dur="66.55" fill="freeze"></animate>
    
44. <set attributeName="opacity" to="0" begin="p6.begin+66.55"></set>
    
45. </image>
    
46. 
    
47. 
    
48. <image xlink:href="https://s1.ax1x.com/2022/03/27/qwHcWQ.jpg" width="600" height="9078" opacity="0" x="-600" y="1000" preserveAspectRatio="none">
    
49. <set attributeName="opacity" to="1" begin="p7.begin"></set>
    
50. <animate id="p7" attributeName="y" from="1000" to="0" begin="p6.end-10" dur="10" fill="freeze"></animate>
    
51. <set attributeName="opacity" to="0" begin="p7.begin+10"></set>
    
52. </image>
    
53. 
    
54. </g>
    
55. </svg>

复制代码

夕阳黄昏

醉美水芙蓉 发表于 2022-4-25 21:35
老师这个贴是把代码隐藏了吗？

不是有意隐藏，svg代码中的图片链接会被论坛过滤掉，这样写则不会。画面代码见楼上