亦是金 发表于 2024-2-12 11:04

《人间值得》 (《烟火人间》电影主题曲) - 李宇春

<style>
.lrcShow{font:bold 3em 楷体,楷体_GB2312;position:absolute;width:80%;height:2em;bottom:0px;left:25%;color:transparent;filter:drop-shadow(2px 2px 1px #fe7bf0);letter-spacing:1px;
--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;
background: repeating-linear-gradient(45deg, white 1px, transparent 2px, #faec0f 4px), repeating-linear-gradient(-45deg, white 1px, transparent 2px, gray 4px); -webkit-background-clip: text;}

.lrcShow::before{position:absolute;content:attr(data-lrc);width:0%;height:100%;left:0;top:0;color:transparent;color:darkred;background-image:linear-gradient(60deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,90%));;-webkit-background-clip:text;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}

@keyframes bgMove1{from{width:0;}to{width:100%;}}
@keyframes bgMove0{from{width:0;}to{width:100%;}}

.lrcShow::before{color:transparent;background-image:url(https://z4a.net/images/2024/01/14/auewj-fb7cv.jpg);}

#outBlk        {
         width:1200px;
         height:700px;
       border: 6px solid rgba(36, 201, 219,.95);
       border-radius: 20px;
         position:relative;
         box-shadow:4px 4px 8px black;
         overflow:hidden;
         margin:80px 0 32px calc(50% - 681px);

        mix-blend-mode: initial;
        background: url('https://z4a.net/images/2024/02/11/bianse02-0.5s.gif') repeat;
         font-size:14px;
}
</style>

<div id="outBlk">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" viewBox="0 0 1200 700">
<image xlink:href="https://imgs-ali.51miz.com/vcg/image/without_watermark/VCG41N665037818.jpg" width="1200" height="700" x="0" y="0" opacity='0'preserveAspectRatio="none" >
<animate id="bp0" attributename="opacity" from='0' to=".9" begin="0; ep13.end-4" dur='4s' fill="freeze"/>
<animate id="ep0" attributename="opacity" from=".9" to='0' begin="bp0.begin+18" dur='3s' fill="freeze"/>
</image>
<image xlink:href="https://img.tukuppt.com//ad_preview/18/19/63/654bc256888ac.jpg" width="1200" height="700" x="0" y="0" opacity='0'preserveAspectRatio="none" >
<animate id="bp1" attributename="opacity" from='0' to=".9" begin="ep0.end-4" dur='4s' fill="freeze"/>
<animate id="ep1" attributename="opacity" from=".9" to='0' begin="bp1.begin+18" dur='3s' fill="freeze"/>
</image>
<image xlink:href="https://img-qn.51miz.com/2018/02/01/20/2018020120191743_P1259225_0931db59O.jpg" width="1200" height="700" x="0" y="0" opacity='0'preserveAspectRatio="none" >
<animate id="bp2" attributename="opacity" from='0' to=".9" begin="ep1.end-4" dur='4s' fill="freeze"/>
<animate id="ep2" attributename="opacity" from=".9" to='0' begin="bp2.begin+18" dur='3s' fill="freeze"/>
</image>
<image xlink:href="https://img-qn.51miz.com/2018/02/02/09/2018020209656037_P1265343_4019f449O.jpg" width="1200" height="700" x="0" y="0" opacity='0'preserveAspectRatio="none" >
<animate id="bp3" attributename="opacity" from='0' to=".9" begin="ep2.end-4" dur='4s' fill="freeze"/>
<animate id="ep3" attributename="opacity" from=".9" to='0' begin="bp3.begin+18" dur='3s' fill="freeze"/>
</image>
<image xlink:href="https://imgs-ali.51miz.com/vcg/image/without_watermark/VCG41N1127922235.jpg" width="1200" height="700" x="0" y="0" opacity='0'preserveAspectRatio="none" >
<animate id="bp4" attributename="opacity" from='0' to=".9" begin="ep3.end-4" dur='4s' fill="freeze"/>
<animate id="ep4" attributename="opacity" from=".9" to='0' begin="bp4.begin+18" dur='3s' fill="freeze"/>
</image>

<image xlink:href="https://imgs-ali.51miz.com/vcg/image/without_watermark/VCG41N625830394.jpg" width="1200" height="700" x="0" y="0" opacity='0'preserveAspectRatio="none" >
<animate id="bp5" attributename="opacity" from='0' to=".9" begin="ep4.end-4" dur='4s' fill="freeze"/>
<animate id="ep5" attributename="opacity" from=".9" to='0' begin="bp5.begin+18" dur='3s' fill="freeze"/>
</image>

<image xlink:href="https://img.tukuppt.com/ad_preview/15/09/65/65151b8cb055f.jpg" width="1200" height="700" x="0" y="0" opacity='0'preserveAspectRatio="none" >
<animate id="bp6" attributename="opacity" from='0' to=".9" begin="ep5.end-4" dur='4s' fill="freeze"/>
<animate id="ep6" attributename="opacity" from=".9" to='0' begin="bp6.begin+18" dur='3s' fill="freeze"/>
</image>
<image xlink:href="https://imgs-ali.51miz.com/vcg/image/without_watermark/VCG41N993587844.jpg" width="1200" height="700" x="0" y="0" opacity='0'preserveAspectRatio="none" >
<animate id="bp7" attributename="opacity" from='0' to=".9" begin="ep6.end-4" dur='4s' fill="freeze"/>
<animate id="ep7" attributename="opacity" from=".9" to='0' begin="bp7.begin+18" dur='3s' fill="freeze"/>
</image>
<image xlink:href="https://imgs-ali.51miz.com/vcg/image/without_watermark/VCG41N1342483009.jpg" width="1200" height="700" x="0" y="0" opacity='0'preserveAspectRatio="none" >
<animate id="bp8" attributename="opacity" from='0' to=".9" begin="ep7.end-4" dur='4s' fill="freeze"/>
<animate id="ep8" attributename="opacity" from=".9" to='0' begin="bp8.begin+18" dur='3s' fill="freeze"/>
</image>
<image xlink:href="https://img.tukuppt.com/photo-big/20/81/65/42659b98eb1c49f2935.jpg" width="1200" height="700" x="0" y="0" opacity='0'preserveAspectRatio="none" >
<animate id="bp9" attributename="opacity" from='0' to=".9" begin="ep8.end-4" dur='4s' fill="freeze"/>
<animate id="ep9" attributename="opacity" from=".9" to='0' begin="bp9.begin+18" dur='3s' fill="freeze"/>
</image>
<image xlink:href="https://img.tukuppt.com/photo-big/20/81/65/46659b98e3f18f34358.jpg" width="1200" height="700" x="0" y="0" opacity='0'preserveAspectRatio="none" >
<animate id="bp10" attributename="opacity" from='0' to=".9" begin="ep9.end-4" dur='4s' fill="freeze"/>
<animate id="ep10" attributename="opacity" from=".9" to='0' begin="bp10.begin+18" dur='3s' fill="freeze"/>
</image>
<image xlink:href="https://img.tukuppt.com/photo-big/20/81/65/55659b98d2df5c09037.jpg" width="1200" height="700" x="0" y="0" opacity='0'preserveAspectRatio="none" >
<animate id="bp11" attributename="opacity" from='0' to=".9" begin="ep10.end-4" dur='4s' fill="freeze"/>
<animate id="ep11" attributename="opacity" from=".9" to='0' begin="bp11.begin+18" dur='3s' fill="freeze"/>
</image>
<image xlink:href="https://img.tukuppt.com//ad_preview/04/19/43/6477463b1b6ed.jpg" width="1200" height="700" x="0" y="0" opacity='0'preserveAspectRatio="none" >
<animate id="bp12" attributename="opacity" from='0' to=".9" begin="ep11.end-4" dur='4s' fill="freeze"/>
<animate id="ep12" attributename="opacity" from=".9" to='0' begin="bp12.begin+18" dur='3s' fill="freeze"/>
</image>
<image xlink:href="https://img-qn.51miz.com/preview/photo/00/01/53/22/new-P-1532233-E82944F8O.jpg" width="1200" height="700" x="0" y="0" opacity='0'preserveAspectRatio="none" >
<animate id="bp13" attributename="opacity" from='0' to=".9" begin="ep12.end-4" dur='4s' fill="freeze"/>
<animate id="ep13" attributename="opacity" from=".9" to='0' begin="bp13.begin+18" dur='3s' fill="freeze"/>
</image>
</svg>

<div class="lrcShow" data-lrc="点击启动播放"></div>
</div>

<script>
{
var lrcPlayerY=function(){return this.init.apply(this,arguments)};lrcPlayerY.prototype={constructor:lrcPlayerY,init:function(opts){lyricTxt=opts.lrcTxt.replace(/(^\s*)|(\s*$)/g,'');

this.audioCtrl=document.getElementById(opts.audioCtrl);

this.lrcShowObj=document.querySelector('.lrcShow');this.lrcVec=this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var parts=lyricTxt.replace(/(^\s*)|(\s*$)/g,"").split(/\r|\n|\r\n/);var lrcs=new Array();for(let index=0;index<parts.length;index++){let chkTime=parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=parts.lastIndexOf(']');if(tIdx>0)lrcTxt=parts.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_0=(+ta)*60+(+ta);if(lrcs.length==0&&_0!=0){lrcs.push({seconds:0,words:'\u00A9\u0020\u0020\u4e5f\u66fe\u5e74\u8f7b'})}

lrcs.push({seconds:_0,words:lrcTxt})}}}return lrcs.sort(function(a,b){return(a.seconds-b.seconds)})},showLrc:function(durTime){this.lrcShowObj.innerHTML=this.lrcShowObj.dataset.lrc=this.lrcVec.words;this.lrcShowObj.style.setProperty('--aniName','bgMove'+(this.idx%2));this.lrcShowObj.style.setProperty('--durTime',durTime+'ms');this.lrcShowObj.style.setProperty('--aniPlayState','running');this.idx++},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.autoplay=true;this.mObj.src=mUrl;this.lrcShowObj.appendChild(this.mObj);var that=this;var turn=0;this.idx=0;this.mObj.addEventListener('ended',function(){that.idx=0;this.play()});this.mObj.addEventListener('play',function(){that.lrcShowObj.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){if(that.idx==1&&this.currentTime<1){that.mObj.play();return false}that.lrcShowObj.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.lrcShowObj.style.display='none';that.lrcShowObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(that.idx<that.lrcVec.length){if(this.currentTime>=that.lrcVec.seconds){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec.seconds-that.lrcVec.seconds)*950)}else{that.showLrc((this.duration-that.lrcVec.seconds)*950)}}}});this.lrcShowObj.addEventListener('click',function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}})}}

var lrctxt = `
《人间值得》 (《烟火人间》电影主题曲)
词：孙虹
曲：陈伟伦
演 唱 ：李宇春
歌词编辑 ：亦是金
- - - - - -
不知怎么的
眼眶已温热
呼啸的列车
唱着离别的歌
穿越过山河
潜入了夜色
熙熙攘攘的霓虹闪烁
好像那天的焰火
后知后觉的
我们长大了
会面对那些苦涩
也会唱温柔的歌
- - - - - -
酷暑是你的
冰棍也是你的
风霜是你的
雪人也是你的
你说人间很曲折
又叹人生几何
不顾一切地热爱着
叫人怎么舍得
你说人间多曲折
又叹人生几何
不顾一切地被爱着
好像也就值得

向前啊 一路
摇摇晃晃 跌跌撞撞
看不见 身后莺飞草长
怀念啊 故乡
为你不再害怕远方
依依不舍
悲欢离合
终会值得
后知后觉的
我们长大了
会面对那些苦涩
也会唱温柔的歌
-- 谢谢欣赏 --

`;
var opts = {
    lrcTxt:lrctxt,
        audioURL:"https://mp3.t57.cn:7087/kwlink_d.php?id=332009742"
}
new lrcPlayerY(opts);
}
</script>

小辣椒 发表于 2024-2-12 12:03

欣赏前辈的精彩制作{:5_150:}

小辣椒 发表于 2024-2-12 12:04

新年快乐！{:5_141:}{:5_141:}{:5_141:}

liumang 发表于 2024-2-12 14:25

问好亦是金老师，欣赏佳作{:5_150:}

liumang 发表于 2024-2-12 14:31

加了这么多的图片转换效果不错，{:5_150:}

亦是金 发表于 2024-2-12 18:57

小辣椒 发表于 2024-2-12 12:03
欣赏前辈的精彩制作

问好！谢谢欣赏点赞！{:5_116:}

亦是金 发表于 2024-2-12 18:57

小辣椒 发表于 2024-2-12 12:04
新年快乐！

新年快乐！{:5_116:}

亦是金 发表于 2024-2-12 18:58

liumang 发表于 2024-2-12 14:25
问好亦是金老师，欣赏佳作

问好管理！{:5_116:}

亦是金 发表于 2024-2-12 18:59

liumang 发表于 2024-2-12 14:31
加了这么多的图片转换效果不错，

谢谢欣赏点赞！新年快乐！{:5_116:}

小辣椒 发表于 2024-2-16 13:45

亦是金 发表于 2024-2-12 18:57
新年快乐！

{:5_147:}{:5_147:}{:5_147:}
页: [1]
查看完整版本: 《人间值得》 (《烟火人间》电影主题曲) - 李宇春