西椅子胡同 发表于 2021-9-11 17:54

SVG代码音画《西北省区风光长图》

自2022年起，本音画因图片音乐断链不能显图了，下面是用电脑中本地文件转换的视频：<br><br><br><video controls="" autoplay loop="" src="http://url.amp3a.com/youku.php/XNTg0NTUwNzU5Mg==.mp4" width=506 height=900></video><br><br>

195400 发表于 2021-9-11 18:28

用的微信图片吧？那图片直接用不行需要下载转存一下

西椅子胡同 发表于 2021-9-11 19:05

本来用的是公众号的图片网址，在我电脑上正常播放，但手机不显图。现已更换了网址，手机也可观看了。

195400 发表于 2021-9-11 19:29

西椅子胡同 发表于 2021-9-11 19:05
本来用的是公众号的图片网址，在我电脑上正常播放，但手机不显图。现已更换了网址，手机也可观看了。

现在能看到了。
http://www.yinhuabbs.cn/data/attachment/forum/202010/12/173753i8k72r7yy032r8tk.gif
电脑缓存了图片所以能看到。

红枫 发表于 2021-9-11 20:05


<script type="text/javascript">
var lxtxt =[">lmth/<",
'>vid/<>naps/<！赞点 ，赏欣 。作佳美精，卷长光风>"体宋仿 me5.4 dlob:tnof;%081:thgieh-enil;)fig.QmOvhh/60/90/1202/moc.x1xa.3z//:sptth(lru:egami-dnuorgkcab;)0,0,552(bgr xp1 :ekorts-txet-tikbew-;tnerapsnart:roloc-llif-txet-tikbew-;txet:pilc-dnuorgkcab-tikbew-"=elyts naps<',
'>";evitaler : noitisop ;%081:thgieh-enil ;retnec:ngila-txet ;xp05: pot-gniddap ;otua xp0 : nigram ;xp053:thgieh;%001:htdiw"=elyts vid<'];

var linelen = lxtxt.length;
var txtStr = '';
for(n = linelen - 1; n >=0; n--)      {
      var linetxt = lxtxt;
      for(j = linetxt.length - 1; j>=0;j--)      {
                txtStr += linetxt.charAt(j);
      }
}
document.write(txtStr);
</script>

西椅子胡同 发表于 2021-9-12 04:52

195400 发表于 2021-9-11 19:29
现在能看到了。

电脑缓存了图片所以能看到。

谢谢！:handshake:handshake:handshake

西椅子胡同 发表于 2021-9-12 04:54

红枫 发表于 2021-9-11 20:05
var lxtxt =[">lmth/

谢谢红枫老师鼓励，问您好！

195400 发表于 2021-9-12 05:26

<div id="blkx" style="position:relative;width:500px;height:auto !important;min-height:300px; position:relative;overflow:hidden; border-radius:16px;margin:12px auto;-webkit-mask-image: radial-gradient(black 35%, 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%20720%22%3E%0A%0A%3Cg%20transform%3D%22rotate%28-90%29%22%3E%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//ss2.meipian.me/users/60902957/ae0e61d0-12ed-11ec-9b31-c77aebeb6ad4.jpg%22%20%0Awidth%3D%22720%22%20height%3D%2210871%22%20opacity%3D%270%27%20x%3D%22-720px%22%20y%3D%22-9871px%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%22-9871%22%20to%3D%221000%22%20begin%3D%220%3B%20p4.end%22%20dur%3D%22108.71s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p0.begin+108.71%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//ss2.meipian.me/users/60902957/7d655ee0-12ec-11ec-9b31-c77aebeb6ad4.jpg%22%0Awidth%3D%22720%22%20height%3D%2217271%22%20opacity%3D%270%27%20x%3D%22-720px%22%20y%3D%22-17271px%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p0.end-9.97%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27p1%27%20attributename%3D%22y%22%20from%3D%22-17271%22%20to%3D%221000%22%20begin%3D%22p0.end-9.97%22%20dur%3D%22182.71%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p1.begin+182.71%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//ss2.meipian.me/users/60902957/7d361180-12ec-11ec-9b31-c77aebeb6ad4.jpg%22%0Awidth%3D%22720%22%20height%3D%2212490%22%20opacity%3D%270%27%20x%3D%22-720px%22%20y%3D%22-12490px%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p1.end-9.97%22%20%3E%3C/set%3E%0A%3Canimate%20id%3D%27p2%27%20attributename%3D%22y%22%20from%3D%22-12490%22%20to%3D%221000%22%20begin%3D%22p1.end-9.97%22%20dur%3D%22134.9s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p2.begin+134.9%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//ss2.meipian.me/users/60902957/7d3eeb20-12ec-11ec-9b31-c77aebeb6ad4.jpg%22%0A%20width%3D%22720%22%20height%3D%2210694%22%20opacity%3D%270%27%20x%3D%22-720px%22%20y%3D%22-10694px%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p2.end-9.97%22%3E%3C/set%3E%0A%3Canimate%20id%3D%27p3%27%20attributename%3D%22y%22%20from%3D%22-10694%22%20to%3D%221000%22%20begin%3D%22p2.end-9.97%22%20dur%3D%22116.94s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p3.begin+116.94%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//ss2.meipian.me/users/60902957/ae0e61d0-12ed-11ec-9b31-c77aebeb6ad4.jpg%22%20%0Awidth%3D%22720%22%20height%3D%2210871%22%20opacity%3D%270%27%20x%3D%22-720px%22%20y%3D%22-10871px%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributename%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p3.end-9.97%22%3E%3C/set%3E%0A%3Canimate%20id%3D%27p4%27%20attributename%3D%22y%22%20from%3D%22-10871%22%20to%3D%22-9871%22%20begin%3D%22p3.end-9.97%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%22p4.begin+10%22%3E%3C/set%3E%0A%3C/image%3E%0A%0A%0A%3C/g%3E%0A%0A%0A%3Ctext%20x%3D%22360%22%20y%3D%22640%22%20style%3D%22fill%3Atransparent%3Bstroke%3Awhite%3Bopacity%3A0%3Bfont-size%3A66px%3B%22%3E%u897F%u5317%u7701%u533A%u98CE%u5149%u957F%u5377%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%220%22%20dur%3D%221s%22%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Canimate%20attributename%3D%22stroke%22%20from%3D%22white%22%20%20to%3D%22red%22%20begin%3D%22p0.begin+5%22%20dur%3D%275%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22stroke%22%20from%3D%22red%22%20%20%20%20to%3D%22green%22%20begin%3D%22p1.begin+5%22%20dur%3D%275%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22stroke%22%20from%3D%22green%22%20%20to%3D%22yellow%22%20begin%3D%22p2.begin+5%22%20dur%3D%275%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22stroke%22%20from%3D%22yellow%22%20to%3D%22blue%22%20begin%3D%22p3.begin+5%22%20dur%3D%275%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22stroke%22%20from%3D%22blue%22%20%20%20to%3D%22white%22%20begin%3D%22p4.begin+5%22%20dur%3D%275%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22p4.end%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3C/text%3E%0A%0A%0A%3Ctext%20x%3D%22100%22%20y%3D%22100%22%20style%3D%22fill%3A%23ffffff%3Bopacity%3A0%3Bfont-size%3A36px%3Bline-height%3A80px%3B%22%3E%u9655%u897F%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%22p0.begin+5%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22p0.end-15%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3C/text%3E%0A%0A%3Ctext%20x%3D%22100%22%20y%3D%22100%22%20style%3D%22fill%3A%23ffffff%3Bopacity%3A0%3Bfont-size%3A36px%3Bline-height%3A80px%3B%22%3E%u7518%u8083%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%22p1.begin+5%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22p1.end-15%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3C/text%3E%0A%0A%3Ctext%20x%3D%22100%22%20y%3D%22100%22%20style%3D%22fill%3A%23ffffff%3Bopacity%3A0%3Bfont-size%3A36px%3Bline-height%3A80px%3B%22%3E%u9752%u6D77%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%22p2.begin+5%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22p2.end-15%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3C/text%3E%0A%3Ctext%20x%3D%22100%22%20y%3D%22100%22%20style%3D%22fill%3A%23ffffff%3Bopacity%3A0%3Bfont-size%3A36px%3Bline-height%3A80px%3B%22%3E%u65B0%u7586%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%220%22%20to%3D%221%22%20begin%3D%22p3.begin+5%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3Canimate%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22p3.end-15%22%20dur%3D%222s%22%20fill%3D%22freeze%22%3E%0A%3C/animate%3E%0A%3C/text%3E%0A%3C/svg%3E";
var blk = document.querySelector('#blkx');

blk.innerHTML = unescape(doctxt);
</script>

红枫 发表于 2021-9-12 13:55

195400 发表于 2021-9-12 05:26
var doctxt = "%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A// ...
老师：欣赏您的美图与创意，学习了！
我想若能达到总体图片不虚化，仅边缘部分虚化的效果就更棒了！

195400 发表于 2021-9-12 15:02

红枫 发表于 2021-9-12 13:55
老师：欣赏您的美图与创意，学习了！
我想若能达到总体图片不虚化，仅边缘部分虚化的效果就更棒了！


看看哪种效果与您的期望接近些？<br>

<img src="http://pan.yinhuabbs.cn/view.php/25a305054f7d58a62d4cf984b44ebb7d.jpg" style="width:440px;
-webkit-mask-image: radial-gradient(black , transparent 90%);
-webkit-mask-size: cover;magin:16px auto;" />
<br>
<img src="http://pan.yinhuabbs.cn/view.php/25a305054f7d58a62d4cf984b44ebb7d.jpg"
style="opacity:0.8; width:440px;overflow:hidden;border-radius:16px;margin:16px auto;
box-shadow: 0px -8px 5px #aaa ,-8px 0px 5px #aaa,8px 0px 5px #aaa ,0px 8px 5px #aaa;">
页: [1] 2 3
查看完整版本: SVG代码音画《西北省区风光长图》