音画：《莲的心事》——学习SVG标签练习
<div style="width: 100%; height:900px; position: relative; margin-left:-40px;align-content: center; text-align:center; "><iframe frameborder=0 style="width:1100px; height:900px; " marginheight=0 marginwidth=0 scrolling=no src="http://tanglianhua.3vcm.vip/yinhua/ldxs.html"></iframe>
</div>
发了好几次才发得出来，直接用代码没有一次成功的，网站总是把代码中的图片地址去掉。用iframe标签出不得，我还以为我被禁言了呢。:lol 昨天学习svg标签知识，今天上网下载图片来用美图秀秀编辑后上传图床。可谓学习很用功哦！以前小时候读书有这么用功就好了！:lol http://www.yinhuabbs.cn/data/attachment/forum/201804/25/164559v6eg9g8ok8gne9ke.gif
195400 发表于 2021-8-24 08:57
谢谢老师，封面我是用一张图片作背景，上面加文字。所以，代码还是用我原来的顺序：
<image xlink: style="width:1024px;height:768px; opacity:1; " x="0px" y="0px">
<animate id="fpicx" attributename="opacity" from="1" to="0.9" begin="0s" dur="10s" fill="freeze" restart="1"/>
<animate attributename="opacity" from="0.9" to="1" begin="fpicx.begin+10s" dur="3s" fill="freeze" />
<animate id="lpicx" attributename="opacity" from="1" to="0" begin="fpicx.begin+12s" dur="2s" fill="freeze" />
</image>
<textx="0" y="0" style="fill:#ff0000;opacity:1;line-height:180%;font:bold 50pt 楷体">
<tspan x="300" y="110">请您欣赏音乐</tspan>
<tspan x="100" y="280" style="fill:#008800; line-height:180%;font:bold 100pt 黑体">《莲的心事》</tspan>
<tspan x="250" y="450" style="fill:#ff00ff; line-height:180%;font:bold 26pt 宋体">图/网络下载编辑 制作/寒冬残荷</tspan>
<animate attributename="opacity" from="1" to="0" begin="0s" dur="15s" fill="freeze" />
</text>
透明度也改了。 195400 发表于 2021-8-24 08:57
原来我也想设置svg盒子的宽度大一点，但我不喜欢缩放时看到背景色，这样就没有了录像视频的感觉了。当然，大框基本能看到全图。 昨天最大的收获（好有成就感）就是制作这个作品。从上网找图片下载来修剪，花了很多时间。能找到这么漂亮的莲花图，我好兴奋！我一直很喜欢莲花，也很喜欢这首歌，曾制作过MV，但用的图片没有这个漂亮、高清…… 寒冬残荷 发表于 2021-8-24 10:05
谢谢老师，封面我是用一张图片作背景，上面加文字。所以，代码还是用我原来的顺序：
代码顺序似乎无所谓只要时间顺序对就行。
现在每张图片动画开始都是前一张结束前的一秒，这样是不是衔接的好些。 寒冬残荷 发表于 2021-8-24 10:17
昨天最大的收获（好有成就感）就是制作这个作品。从上网找图片下载来修剪，花了很多时间。能找到这么漂亮的 ...
不会修图、绘图等，只能“挂眼科看”:L 寒冬残荷 发表于 2021-8-24 10:11
原来我也想设置svg盒子的宽度大一点，但我不喜欢缩放时看到背景色，这样就没有了录像视频的感觉了。当然 ...
注意第二和第七张图片，它们就是由2048x1536 到 1024x768 然后还原，搞清楚视窗和图片尺寸之间的关系就不会露处背景了。
哦，用的还是你原来的代码，那就没什么差别了。
页:
[1]
2