音畫：《蓮的心事》——學習SVG標簽練習

寒冬殘荷

寒冬殘荷

發(fā)了好幾次才發(fā)得出來，直接用代碼沒有一次成功的，網(wǎng)站總是把代碼中的圖片地址去掉。用iframe標簽出不得，我還以為我被禁言了呢。

寒冬殘荷

昨天學習svg標簽知識，今天上網(wǎng)下載圖片來用美圖秀秀編輯后上傳圖床。可謂學習很用功哦！以前小時候讀書有這么用功就好了！

195400

寒冬殘荷

195400 發(fā)表于 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>
<text  x="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 宋體">圖/網(wǎng)絡下載編輯　制作/寒冬殘荷</tspan>
<animate attributename="opacity" from="1" to="0" begin="0s" dur="15s" fill="freeze" />
</text>

透明度也改了。

寒冬殘荷

195400 發(fā)表于 2021-8-24 08:57

原來我也想設置svg盒子的寬度大一點，但我不喜歡縮放時看到背景色，這樣就沒有了錄像視頻的感覺了。當然，大框基本能看到全圖。

寒冬殘荷

昨天最大的收獲（好有成就感）就是制作這個作品。從上網(wǎng)找圖片下載來修剪，花了很多時間。能找到這么漂亮的蓮花圖，我好興奮！我一直很喜歡蓮花，也很喜歡這首歌，曾制作過MV，但用的圖片沒有這個漂亮、高清……

195400

寒冬殘荷 發(fā)表于 2021-8-24 10:05
謝謝老師，封面我是用一張圖片作背景，上面加文字。所以，代碼還是用我原來的順序：

代碼順序似乎無所謂只要時間順序對就行。

現(xiàn)在每張圖片動畫開始都是前一張結束前的一秒，這樣是不是銜接的好些。

195400

寒冬殘荷 發(fā)表于 2021-8-24 10:17
昨天最大的收獲（好有成就感）就是制作這個作品。從上網(wǎng)找圖片下載來修剪，花了很多時間。能找到這么漂亮的 ...

不會修圖、繪圖等，只能“掛眼科看”

195400

寒冬殘荷 發(fā)表于 2021-8-24 10:11
原來我也想設置svg盒子的寬度大一點，但我不喜歡縮放時看到背景色，這樣就沒有了錄像視頻的感覺了。當然 ...

注意第二和第七張圖片，它們就是由2048x1536 到 1024x768 然后還原，搞清楚視窗和圖片尺寸之間的關系就不會露處背景了。
哦，用的還是你原來的代碼，那就沒什么差別了。