姑苏繁华图
本帖最后由 起个网名好难 于 2024-3-1 18:03 编辑 <br /><br /><p style="text-indent:1.6em;font:bold 2em 仿宋;color:brown;">姑苏繁华图. 《姑苏繁华图》（题跋中称其为《盛世滋生图》）是清代宫廷画家 徐扬 创作的一幅纸本画作。. 该作品完成于1759年，历时24年，现收藏于辽宁省博物馆。.《姑苏繁华图》，全长十二米多，画面“自灵岩山起，由 木渎镇 东行，过横山，渡石湖，历上方山，介狮和两山之间，入姑苏郡城，自葑、盘、胥三门出 阊门 外，转山塘桥，至虎丘山止”。. 据统计，画中约有一万两千余人，近四百只船，五十多座桥，二百多家店铺，两千多栋房屋。.《姑苏繁华图》以长卷形式和散点透视技法，描绘了当时苏州“商贾辐辏，百货骈阗”的市井风情。</p>
<div id="blkx" style="position:relative;width:80vw;height:auto !important;min-height:30vw; position:relative;overflow:hidden; border-radius:16px;margin:20px 16px 32px calc(50% - 40vw - 81px);-webkit-mask-image: radial-gradient(black 50%, transparent 75%);-webkit-mask-size: cover;"></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%20640%22%3E%0A%0A%3Cg%20transform%3D%22rotate%28-90%29%22%3E%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/12/4p4vOs.jpg%22%20%0Awidth%3D%22640%22%20height%3D%221616%22%20opacity%3D%270%27%20x%3D%22-640%22%20y%3D%220%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p0.begin%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27p0%27%20attributename%3D%22y%22%20from%3D%220%22%20to%3D%22-1616%22%20begin%3D%220%3B%20pc.end%22%20dur%3D%2216.16%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p0.begin+16.16%22%3E%3C/set%3E%0A%3C/image%3E%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/12/49Foxe.jpg%22%20%0Awidth%3D%22640%22%20height%3D%221146%22%20opacity%3D%270%27%20x%3D%22-640%22%20y%3D%221000%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p1.begin%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27p1%27%20attributename%3D%22y%22%20from%3D%221000%22%20to%3D%22-1146%22%20begin%3D%22p0.end-10%22%20dur%3D%2221.46%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p1.begin+21.46%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/12/49kUQe.jpg%22%20%0Awidth%3D%22640%22%20height%3D%222538.7%22%20opacity%3D%270%27%20x%3D%22-640%22%20y%3D%221000%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p2.begin%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27p2%27%20attributename%3D%22y%22%20from%3D%221000%22%20to%3D%22-2538.7%22%20begin%3D%22p1.end-10%22%20dur%3D%2235.387%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p2.begin+35.387%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/12/49AdpT.jpg%22%20%0Awidth%3D%22640%22%20height%3D%222542.7%22%20opacity%3D%270%27%20x%3D%22-640%22%20y%3D%221000%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p3.begin%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27p3%27%20attributename%3D%22y%22%20from%3D%221000%22%20to%3D%22-2542.7%22%20begin%3D%22p2.end-10%22%20dur%3D%2235.427%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p3.begin+35.427%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/12/49AUhV.jpg%22%20%0Awidth%3D%22640%22%20height%3D%221940%22%20opacity%3D%270%27%20x%3D%22-640%22%20y%3D%221000%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p4.begin%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27p4%27%20attributename%3D%22y%22%20from%3D%221000%22%20to%3D%22-1940%22%20begin%3D%22p3.end-10%22%20dur%3D%2229.4%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p4.begin+29.4%22%3E%3C/set%3E%0A%3C/image%3E%0A%20%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/12/49ANt0.jpg%22%20%0Awidth%3D%22640%22%20height%3D%221088%22%20opacity%3D%270%27%20x%3D%22-640%22%20y%3D%221000%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p5.begin%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27p5%27%20attributename%3D%22y%22%20from%3D%221000%22%20to%3D%22-1088%22%20begin%3D%22p4.end-10%22%20dur%3D%2220.88%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p5.begin+20.88%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/12/49AJ7n.jpg%22%20%0Awidth%3D%22640%22%20height%3D%221821%22%20opacity%3D%270%27%20x%3D%22-640%22%20y%3D%221000%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p6.begin%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27p6%27%20attributename%3D%22y%22%20from%3D%221000%22%20to%3D%22-1821%22%20begin%3D%22p5.end-10%22%20dur%3D%2228.21%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p6.begin+28.21%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/12/49AQ1S.jpg%22%20%0Awidth%3D%22640%22%20height%3D%221701%22%20opacity%3D%270%27%20x%3D%22-640%22%20y%3D%221000%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p7.begin%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27p7%27%20attributename%3D%22y%22%20from%3D%221000%22%20to%3D%22-1701%22%20begin%3D%22p6.end-10%22%20dur%3D%2227.01%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p7.begin+27.01%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/12/49AG0s.jpg%22%20%0Awidth%3D%22640%22%20height%3D%222346.7%22%20opacity%3D%270%27%20x%3D%22-640%22%20y%3D%221000%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p8.begin%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27p8%27%20attributename%3D%22y%22%20from%3D%221000%22%20to%3D%22-2346.7%22%20begin%3D%22p7.end-10%22%20dur%3D%2233.467%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p8.begin+33.467%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/12/49Al6g.jpg%22%20%0Awidth%3D%22640%22%20height%3D%222032%22%20opacity%3D%270%27%20x%3D%22-640%22%20y%3D%221000%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p9.begin%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27p9%27%20attributename%3D%22y%22%20from%3D%221000%22%20to%3D%22-2032%22%20begin%3D%22p8.end-10%22%20dur%3D%2230.32%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p9.begin+30.32%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/12/49A8mj.jpg%22%20%0Awidth%3D%22640%22%20height%3D%221660%22%20opacity%3D%270%27%20x%3D%22-640%22%20y%3D%221000%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22pa.begin%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27pa%27%20attributename%3D%22y%22%20from%3D%221000%22%20to%3D%22-1660%22%20begin%3D%22p9.end-10%22%20dur%3D%2226.6%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22pa.begin+26.6%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/12/49A1XQ.jpg%22%20%0Awidth%3D%22640%22%20height%3D%222344%22%20opacity%3D%270%27%20x%3D%22-640%22%20y%3D%221000%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22pb.begin%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27pb%27%20attributename%3D%22y%22%20from%3D%221000%22%20to%3D%22-2344%22%20begin%3D%22pa.end-10%22%20dur%3D%2233.44%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22pb.begin+33.44%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/12/4p4vOs.jpg%22%20%0Awidth%3D%22640%22%20height%3D%221616%22%20opacity%3D%270%27%20x%3D%22-640%22%20y%3D%221000%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22pc.begin%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27pc%27%20attributename%3D%22y%22%20from%3D%221000%22%20to%3D%220%22%20begin%3D%22pb.end-9.98%22%20dur%3D%2210%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22pc.begin+10%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>
<div id="lyricShow" style="position:relative; width:100%;text-align:center; ">
<img src="http://bpic.588ku.com/element_pic/17/09/12/086fa9e4799099a98eb54aab236be2b9.jpg"
style="width:36px; height:36px; overflow:hidden; border-radius:50%; margin: 0px auto;">
</div>
<textarea id="lrc_content" style="visibility:hidden;">
作词 : 苏展
作曲 : 风子
越过时间的 重重云烟
又乘着故梦盘桓
借着渔火点点 停泊在寒山寺前
听钟声 过客船
青史留下了 多少传言
转眼三笑成趣谈
偏爱桃花潋滟 碧螺敲醒了春天
横塘驿 夜不眠
声声慢 琴声出幽山
模糊了时间
乌鹊桥多少传言
随虎丘塔隐入夜漫漫
月落霜满天 今朝人未眠
风情万般在眼前
纵然时光遥远
仍旧能华彩不减
短短苏绣有千年
一瞬间 岁月仍未变
隔着山水梦个遍
放眼看古今人间
谁的烟波入画船
停在姑苏岸
越过时间的 重重云烟
又乘着故梦盘桓
借着渔火点点 停泊在寒山寺前
听钟声 过客船
青史留下了 多少传言
转眼三笑成趣谈
偏爱桃花潋滟 碧螺敲醒了春天
横塘驿 夜不眠
声声慢 琴声出幽山
模糊了时间
乌鹊桥多少传言
随虎丘塔隐入夜漫漫
月落霜满天 今朝人未眠
风情万般在眼前
纵然时光遥远
仍旧能华彩不减
短短苏绣有千年
一瞬间 岁月仍未变
隔着山水梦个遍
放眼看古今人间
谁的烟波入画船
停在姑苏岸
月落霜满天 今朝人未眠
风情万般在眼前
纵然时光遥远
仍旧能华彩不减
短短苏绣有千年
一瞬间 岁月仍未变
隔着山水梦个遍
放眼看古今人间
谁的烟波入画船
停在姑苏岸
</textarea>
<script type="text/javascript">
function startSound(){if(isLoop){if(evFlag)for(showLrcObj.parentElement.removeEventListener("click",startSound);showLrcObj.children.length>sLine;)showLrcObj.removeChild(showLrcObj.children)}else if(evFlag){var ctrlButton=showLrcObj.querySelector("img");ctrlButton&&(ctrlButton.style.display="none")}mObj.play(),showLrc(),evFlag=!1}function chgGColor(){var gctxt;sLength-1>gcIdx?(gctxt="<font color='"+gcys+"'>"+gcline.substr(0,gcIdx+1)+"</font>",gctxt+=gcline.substr(gcIdx+1)):gctxt="<font color='"+gcys+"'>"+gcline+"</font>",gcObj.innerHTML=gctxt,gcIdx++,_lastTime-=dt,_lastTime>0?setTimeout(chgGColor,dt):setTimeout(showLrc,_lastTime+dt)}function showLrc(){for(_t=10*lrcVec,_lastTime=lrcIdx+1==lrcVec.length?1e4:10*lrcVec-_t,_spans=showLrcObj.getElementsByTagName("span"),k=0;k<sLine;k++)_spans.innerText=lrcIdx+k>=lrcVec.length?"":lrcVec;lrcIdx++,lrcIdx%=lrcVec.length,0!=lrcIdx?(gcline=_spans.innerText,sLength=gcline.length,0==sLength?setTimeout(showLrc,_lastTime):(dt=parseInt(_lastTime/sLength),gcIdx=0,gcObj=_spans,chgGColor())):console.log("lrcIdx = "+lrcIdx+" play end ")}function sortLrcVec(a,b){return a-b}function procLRC(opts){for(sMode=0,lrcIdx=0,lrcVec=new Array,lyricTxtObj=document.getElementById(opts.lrcTxtID),lyricTxt=lyricTxtObj.innerHTML,showLrcObj=document.getElementById(opts.lrcShowID),showLrcObj.style.fontSize=opts.gczh?opts.gczh:"1em",showLrcObj.style.fontFamily=opts.gczt?opts.gczt:"微软雅黑",showLrcObj.style.fontWeight=opts.gcct?"bold":"normal",showLrcObj.style.textAlign=opts.dqfs?opts.dqfs:"center",showLrcObj.style.color=opts.gcys1?opts.gcys1:"gray",gcys=opts.gcys?opts.gcys:"red",sMode=opts.showMode?opts.showMode:0,sLine=opts.gchs?opts.gchs:1,isLoop=opts.playLoop?opts.playLoop:!1,k=0;k<sLine;k++)sItem=document.createElement("span"),0!=sMode&&(sItem.style.textAlign="left"),sItem.style.display="block",sItem.style.marginBottom="4px",showLrcObj.appendChild(sItem);0!=sMode&&(showLrcObj.style.writingMode="tb-rl",showLrcObj.style.msWritingMode="tb-rl",showLrcObj.style.mozWritingMode="vertical-rl",showLrcObj.style.webkitWritingMode="vertical-rl");var lyriclist=lyricTxt.split(/\r|\n|\r\n/);for(n=0;n<lyriclist.length;n++)if(lyriclist=lyriclist.trim(),lyriclist.length>8)if(lrcItems=lyriclist.split("]"),2==lrcItems.length)sj=lrcItems.substr(1).split(/:|\./),isNaN(parseInt(sj,10))||(_t=100*(60*Number(sj)+Number(sj))+Number(sj.substr(0,2)),_lrc=lrcItems,0==lrcVec.length&&0!=_t&&lrcVec.push(),lrcVec.push());else if(lrcItems.length>2)for(k=0;k<lrcItems.length-1;k++)sj=lrcItems.substr(1).split(/:|\./),_t=100*(60*Number(sj)+Number(sj))+Number(sj.substr(0,2)),_lrc=lrcItems,lrcVec.push();lrcVec.sort(sortLrcVec),evFlag=!0,mObj=document.createElement("audio"),mObj.loop=!1,mObj.muted=!1,mObj.src=opts.audioURL,mObj.addEventListener("ended",function(){if(lrcIdx=0,lyricTxtObj.innerHTML="",isLoop)startSound();else{var ctrlButton=showLrcObj.querySelector("img");ctrlButton&&(ctrlButton.style.display="block"),evFlag=!0}}),showLrcObj.parentElement.addEventListener("click",startSound),mObj.addEventListener("error",function(){console.log("audio wrong, remove play start event"),showLrcObj.parentElement.removeEventListener("click",startSound),showLrcObj.style.display="none"})}var lyricTxtObj,mObj,lrcIdx,lrcVec,showLrcObj,evflag,sMode,sLine,isLoop,gcys,gcIdx=0,gcline,dt,sLength,_lastTime,gcObj;
</script>
<script type="text/javascript">
var opts = {
lrcTxtID:'lrc_content',
lrcShowID:"lyricShow",
audioURL:"http://music.163.com/song/media/outer/url?id=1806085209.mp3",
gczh:'32px',
gczt:'楷体,楷体_GB2312',
gcct:true,
dqfs:'center',
gcys1:'blue',
gcys:'red',
showMode:0,
playLoop: true,
gchs:1
};
setTimeout(function(){
procLRC(opts);
}, 1000);
</script> 和清明上河图一样，都是描述当时民风的吧。漂亮的图片滚动效果，还是头一次看到的呢。
歌词同步也很漂亮，给楼主点赞{:4_187:} 江南水多船也多，看到了好多的船呢{:4_173:} 红影 发表于 2022-9-25 18:39
和清明上河图一样，都是描述当时民风的吧。漂亮的图片滚动效果，还是头一次看到的呢。
歌词同步也很漂亮， ...
谢谢你的欣赏！ 红影 发表于 2022-9-25 18:40
江南水多船也多，看到了好多的船呢
大概是大运河的原因吧。 起个网名好难 发表于 2022-9-25 18:52
谢谢你的欣赏！
客气了，感谢带来的好帖{:4_204:} 起个网名好难 发表于 2022-9-25 18:54
大概是大运河的原因吧。
这个倒是不知道，只知道江南水系比较发达。 欣赏精美音画佳作！希望能介绍其制作方法，让爱好者模仿。 相约爱晚亭 发表于 2022-10-4 13:40
欣赏精美音画佳作！希望能介绍其制作方法，让爱好者模仿。
抱歉， 嘴笨蛮难把方法说清楚。可以看帖子代码仿制即可。 起个网名好难 发表于 2022-10-4 14:03
抱歉， 嘴笨蛮难把方法说清楚。可以看帖子代码仿制即可。
是的，写教程也是一件难事。谢谢！ 瑰宝！{:5_116:} 东篱闲人 发表于 2022-10-5 19:17
瑰宝！
<svg width="100%" height="100%" viewBox="0 0 1000 600"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="myPath"
d="M 100 300 h 800"/>
</defs>
<use xlink:href="#myPath" fill="none" stroke="transparent"/>
<text font-family="Verdana" font-size="50" stroke="red" fill="yellow">
<textPath xlink:href="#myPath">
感谢欣赏！向您学习!
<animate attributeName="startOffset" from="0" to ="800" begin="0s" dur="10s" repeatCount="indefinite" />
</textPath>
</text>
</svg>
页:
[1]