195400 发表于 2022-10-23 09:41

长卷 --- 大美江山

<link rel="stylesheet" type="text/css" href="http://cesholl.cn3v.work/sstyle/lrcPlayerY.min.css" />
<style type="text/css">
.descTitle{fill:transparent;stroke-width:1;stroke-dasharray:0 300;stroke-dashoffset:0;stroke:hsl(0,100%,40%);letter-spacing:1em;font-size:5em;animation:varstroke 20s ease-in-out infinite alternate;}@keyframes varstroke{to{stroke-dashoffset:2000;stroke-dasharray:300 0;}}
</style>

<div style="width:1200px;overflow:hidden;position:relative;border-radius:24px;margin:100px 16px 32px -160px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" viewBox="0 0 1000 640" id="svgadmin"></svg>

        <divclass="lrcShow" data-lrc=''></div>
        <divid="mDisk" class='mCtrl'></div>
</div>
<script type="text/javascript" src="http://cesholl.cn3v.work/scripts/lrcPlayerY.packed.js">
</script>

<script type="text/javascript">
let        pics = [
"https://s1.ax1x.com/2022/10/21/xclXVK.jpg",
"https://s1.ax1x.com/2022/10/21/xcl6vn.jpg",
"https://s1.ax1x.com/2022/10/21/xcls3j.jpg",
"https://s1.ax1x.com/2022/10/21/xclguq.jpg",
"https://s1.ax1x.com/2022/10/21/xclrCQ.jpg",
"https://s1.ax1x.com/2022/10/21/xclRbV.jpg",
"https://s1.ax1x.com/2022/10/21/xcl0US.jpg",                                                                                          
"https://s1.ax1x.com/2022/10/21/xclwE8.jpg",
"https://s1.ax1x.com/2022/10/21/xclB4g.jpg",
"https://s1.ax1x.com/2022/10/21/xcl2D0.jpg",
"https://s1.ax1x.com/2022/10/21/xclfET.jpg",
"https://s1.ax1x.com/2022/10/21/xclhUU.jpg",
"https://s1.ax1x.com/2022/10/21/xcl45F.jpg",
"https://s1.ax1x.com/2022/10/21/xclIC4.jpg",
"https://s1.ax1x.com/2022/10/21/xcl7vR.jpg",
"https://s1.ax1x.com/2022/10/21/xclbK1.jpg",
"https://s1.ax1x.com/2022/10/21/xclLb6.jpg",
"https://s1.ax1x.com/2022/10/21/xclo8J.jpg",
"https://s1.ax1x.com/2022/10/21/xclqDx.jpg",
"https://s1.ax1x.com/2022/10/21/xclT29.jpg"
];
let        svgStr = '<g transform="rotate(-90)">\n';
for(idx = 0 ; idx < pics.length; idx++)        {
        svgStr += '<image xlink:href="' + pics;
        svgStr += '" width="640" height="1173.5" opacity=\'0\' x="-640" y="0" preserveAspectRatio="none">\n';
        svgStr += '<set attributename="opacity" to="1" begin="p' + idx + '.begin" ></set>\n';
        if(idx == 0)        {
                svgStr += '<animate id="p' + idx + '" attributename="y" from="0" to="-1173.5" begin="0; p' + pics.length + '.end"';
                svgStr += ' dur="11.735" fill="freeze"></animate>\n';
                svgStr += '<set attributename="opacity" to="0" begin="p' + idx + '.begin+11.735"></set>\n';
        }
        else        {
                svgStr += '<animate id="p' + idx + '" attributename="y" from="1000" to="-1173.5" begin="p' + (idx-1) + '.end-10"';
                svgStr += ' dur="21.735" fill="freeze"></animate>\n';
                svgStr += '<set attributename="opacity" to="0" begin="p' + idx + '.begin+21.735"></set>\n';
       
        }
        svgStr += '</image>\n'
}
svgStr += '<image xlink:href="' + pics;
svgStr += '" width="640" height="1173.5" opacity=\'0\' x="-640" y="1000" preserveAspectRatio="none">\n';
svgStr += '<set attributename="opacity" to="1" begin="p' + pics.length + '.begin" ></set>\n';
svgStr += '<animate id="p' + pics.length + '" attributename="y" from="1000" to="0" begin="p' + (pics.length - 1) + '.end-10"';
svgStr += ' dur="10" fill="freeze"></animate>\n';
svgStr += '<set attributename="opacity" to="0" begin="p' + pics.length + '.begin+10"></set>\n';
svgStr += '</image></g>\n';
svgStr += '<text text-anchor="middle" x="50%" y="30%" class="descTitle">大美江山</text>\n';

svgadmin.innerHTML = svgStr;

svgadmin.onmouseover = () => svgadmin.pauseAnimations();
svgadmin.onmouseout = () => svgadmin.unpauseAnimations();

var lrc =`江山如画 - 李丹阳
词：贺东久
曲：印青
你是我春光的明媚
你是我夏日的芳华
你是我秋色的金黄
你是我冬雪的潇洒
生生不息在你怀抱里
代代儿女为你心融化
青山连江海
白鸽舞朝霞
你古老而又灿烂
你年轻而又挺拔
年年岁岁情不变
江山如画是我家
你古老而又灿烂
你年轻而又挺拔
年年岁岁情不变
江山如画是我家
你是我希望的彩虹
你是我奔腾的骏马
你是我生命的摇篮
你是我远行的牵挂
心心相印为你织锦绣
默默耕耘在你阳光下
热血润热土
泪花浇心花
你古老而又灿烂
你年轻而又挺拔
年年岁岁情不变
江山如画是我家
你古老而又灿烂
你年轻而又挺拔
年年岁岁情不变
江山如画是我家
你古老而又灿烂
你年轻而又挺拔
年年岁岁情不变
江山如画是我家
江山如画是我家
`;

var opts = {
        lrcTxt:lrc,
        audioCtrl:'mDisk',
        //        歌曲MP3链接放这里，酷我音乐链接两种在花潮都可用
//        audioURL:'https://www.qqmc.com/up/kwlink.php?id=22855038&.mp3'
        audioURL:'https://antiserver.kuwo.cn/anti.s?rid=22855038&response=res&format=mp3&type=convert_url'
};
new lrcPlayerY(opts);

</script>

蓝魔 发表于 2022-10-23 17:58

欣赏一下，谢谢。没听到音乐？

195400 发表于 2022-10-23 18:23

蓝魔 发表于 2022-10-23 17:58
欣赏一下，谢谢。没听到音乐？

感谢你的欣赏。

如果音乐没启动点一下右下角的那个圆盘。

非常开心 发表于 2022-10-24 21:31

欣赏楼主的新作，点赞[]多谢分享！

195400 发表于 2022-10-25 08:48

非常开心 发表于 2022-10-24 21:31
欣赏楼主的新作，点赞[]多谢分享！

http://www.yinhuabbs.cn/data/attachment/forum/202210/17/202740lx5byi2zqbjt0yyq.gif

页: [1]
查看完整版本: 长卷 --- 大美江山