可爱老人网

 找回密码
 注册会员
搜索
楼主: 夕阳黄昏

江山如画

[复制链接]
 楼主| 发表于 2022-3-29 13:07 | 显示全部楼层
娟子 发表于 2022-3-29 10:43
欣赏老师佳作---江山如画,图片移动非常顺畅平稳 ,点赞!


 楼主| 发表于 2022-3-29 13:08 | 显示全部楼层


发表于 2022-3-29 19:12 | 显示全部楼层
欣赏学习!谢谢介绍分享!
 楼主| 发表于 2022-3-29 19:16 | 显示全部楼层
沪上人 发表于 2022-3-29 19:12
欣赏学习!谢谢介绍分享!

发表于 2022-3-29 19:55 | 显示全部楼层
欣赏老师精彩音画,学习了
 楼主| 发表于 2022-3-29 20:26 | 显示全部楼层
松柏一 发表于 2022-3-29 19:55
欣赏老师精彩音画,学习了

发表于 2022-4-25 21:35 | 显示全部楼层
老师这个贴是把代码隐藏了吗?
 楼主| 发表于 2022-4-25 22:30 | 显示全部楼层
本帖最后由 夕阳黄昏 于 2022-4-25 22:32 编辑
湛蓝 发表于 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. <g transform="rotate(-90)">
  3. <image xlink:href="https://s1.ax1x.com/2022/03/27/qwHcWQ.jpg" width="600" height="9078" opacity="0" x="-600" y="0" preserveAspectRatio="none">
  4. <set attributeName="opacity" to="1" begin="p0.begin"></set>
  5. <animate id="p0" attributeName="y" from="0" to="-9078" begin="0; p7.end" dur="90.78" fill="freeze"></animate>
  6. <set attributeName="opacity" to="0" begin="p0.begin+90.78"></set>
  7. </image>

  8. <image xlink:href="https://s1.ax1x.com/2022/03/27/qwHgzj.jpg" width="600" height="10955" opacity="0" x="-600" y="1000" preserveAspectRatio="none">
  9. <set attributeName="opacity" to="1" begin="p1.begin"></set>
  10. <animate id="p1" attributeName="y" from="1000" to="-10955" begin="p0.end-10" dur="119.55" fill="freeze"></animate>
  11. <set attributeName="opacity" to="0" begin="p1.begin+119.55"></set>
  12. </image>


  13. <image xlink:href="https://s1.ax1x.com/2022/03/27/qwH6Jg.jpg" width="600" height="7400" opacity="0" x="-600" y="1000" preserveAspectRatio="none">
  14. <set attributeName="opacity" to="1" begin="p2.begin"></set>
  15. <animate id="p2" attributeName="y" from="1000" to="-7400" begin="p1.end-10" dur="84" fill="freeze"></animate>
  16. <set attributeName="opacity" to="0" begin="p2.begin+84"></set>
  17. </image>

  18. <image xlink:href="https://s1.ax1x.com/2022/03/27/qwHyFS.jpg" width="600" height="7400" opacity="0" x="-600" y="1000" preserveAspectRatio="none">
  19. <set attributeName="opacity" to="1" begin="p3.begin"></set>
  20. <animate id="p3" attributeName="y" from="1000" to="-7400" begin="p2.end-10" dur="84" fill="freeze"></animate>
  21. <set attributeName="opacity" to="0" begin="p3.begin+84"></set>
  22. </image>

  23. <image xlink:href="https://s1.ax1x.com/2022/03/27/qwHro8.jpg" width="600" height="8768" opacity="0" x="-600" y="1000" preserveAspectRatio="none">
  24. <set attributeName="opacity" to="1" begin="p4.begin"></set>
  25. <animate id="p4" attributeName="y" from="1000" to="-8768" begin="p3.end-10" dur="97.68" fill="freeze"></animate>
  26. <set attributeName="opacity" to="0" begin="p4.begin+97.68"></set>
  27. </image>

  28. <image xlink:href="https://s1.ax1x.com/2022/03/27/qwHWyn.jpg" width="600" height="6320" opacity="0" x="-600" y="1000" preserveAspectRatio="none">
  29. <set attributeName="opacity" to="1" begin="p5.begin"></set>
  30. <animate id="p5" attributeName="y" from="1000" to="-6320" begin="p4.end-10" dur="73.2" fill="freeze"></animate>
  31. <set attributeName="opacity" to="0" begin="p5.begin+73.2"></set>
  32. </image>

  33. <image xlink:href="https://s1.ax1x.com/2022/03/27/qwHRQs.jpg" width="600" height="5655" opacity="0" x="-600" y="1000" preserveAspectRatio="none">
  34. <set attributeName="opacity" to="1" begin="p6.begin"></set>
  35. <animate id="p6" attributeName="y" from="1000" to="-5655" begin="p5.end-10" dur="66.55" fill="freeze"></animate>
  36. <set attributeName="opacity" to="0" begin="p6.begin+66.55"></set>
  37. </image>


  38. <image xlink:href="https://s1.ax1x.com/2022/03/27/qwHcWQ.jpg" width="600" height="9078" opacity="0" x="-600" y="1000" preserveAspectRatio="none">
  39. <set attributeName="opacity" to="1" begin="p7.begin"></set>
  40. <animate id="p7" attributeName="y" from="1000" to="0" begin="p6.end-10" dur="10" fill="freeze"></animate>
  41. <set attributeName="opacity" to="0" begin="p7.begin+10"></set>
  42. </image>

  43. </g>
  44. </svg>
复制代码


 楼主| 发表于 2022-4-25 22:30 | 显示全部楼层
本帖最后由 夕阳黄昏 于 2022-4-25 22:33 编辑
醉美水芙蓉 发表于 2022-4-25 21:35
老师这个贴是把代码隐藏了吗?

不是有意隐藏,svg代码中的图片链接会被论坛过滤掉,这样写则不会。画面代码见楼上
发表于 2022-4-26 06:18 | 显示全部楼层
39楼的代码对于不懂代码的人来说,一目了然
原来是被过滤掉了。。。。
        
下一页 发布主题 快速回复

手机版|公众号|小黑屋|可爱老人网

GMT+8, 2025-3-17 03:29

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表