雪季 --- 王杰
本帖最后由 起个网名好难 于 2024-1-17 10:55 编辑 <br /><br /><style>.lrcShow{font:bold 3em 楷体,楷体_GB2312;position:absolute;width:80%;height:2em;bottom:0px;left:20%;color:hsl(60,100%,40%);filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;}.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%;}}
#outBlk {width:960px;height:600px; position:relative;margin:20px auto 20px calc(50% - 580px);
box-shadow:3px 3px 8px darkgray;
overflow:hidden;border-radius:24px;
}
#mBox {width:2880px;height:600px;position:absolute; left:0px;animation: mLeft 28.8s infinite linear;}
.mPic {width:960px;height:600px;float:left;background:url(https://i.mp3.wf/view.php/b94c238aaf48937346e7382b6058dc79.png) no-repeat center/cover; opacity:0.8;}
@keyframes mLeft { to { left: -1920px; }}
#vidpx {width:1280px;}
</style>
<div id="outBlk">
<div id="mBox">
<div class="mPic"></div>
<div class="mPic" style="transform:scaleX(-1);"></div>
<div class="mPic" ></div>
</div>
<video id="vidpx" src="https://img.tukuppt.com/video_show/2475824/00/01/59/5b46b977d9e77.mp4" autoplay loop muted ></video>
<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 = `
雪季 - 王杰 (Dave Wang)
词：李子恒
曲：陈泰安
白色是荒芜白色是孤独
白色美丽也是痛苦
游戏和追逐被爱或幸福
季节已过梦会更清楚
人在狂热中烫伤的真心
是否雪已化还能再躲起
让冰冷的温柔拥抱我的愁
期待越过天空越沉默
让痛苦的沉默说尽我的忧
不能为爱投诉
只有耐心等候你的雪溶过
白色是荒芜白色是孤独
白色美丽也是痛苦
游戏和追逐被爱或幸福
季节已过梦会更清楚
人在狂热中烫伤的真心
是否雪已化还能再躲起
让冰冷的温柔拥抱我的愁
期待越过天空越沉默
让痛苦的沉默说尽我的忧
不能为爱投诉
只有耐心等候你的雪溶过
让冰冷的温柔拥抱我的愁
期待越过天空越沉默
让痛苦的沉默说尽我的忧
不能为爱投诉
只有耐心等候你的雪溶过
`;
//
var opts = {
lrcTxt:lrctxt,
audioURL:"https://mp3.t57.cn:7087/kwlink_d.php?id=54533137",
}
new lrcPlayerY(opts);
}
</script>
醉美水芙蓉 发表于 2024-1-15 21:09
欣赏老师精彩音画！
https://chuangshicdn.mpres.51vv.com/v_block/f29ee0552b2f29a6fccab4f0fb6a676c.gif
https://img95.699pic.com/element/40123/0325.png_860.png 老师制作速度真快！好看喜欢点赞！{:4_180:} 难难太棒了，这个特效漂亮，以前收藏的特效基本都没有用了，难难这个效果画面流畅，歌词同步也是漂亮，特别赞！ 欣赏难难的精彩制作，学习了，也是要套用一次玩玩{:4_178:} 漂亮的无缝链接滚动背景，这张图图选得漂亮，歌曲也选得好。欣赏难难好帖{:4_199:} 亦是金 发表于 2024-1-15 21:27
老师制作速度真快！好看喜欢点赞！
https://chuangshicdn.mpres.51vv.com/v_block/f29ee0552b2f29a6fccab4f0fb6a676c.gif
https://img95.699pic.com/element/40123/0325.png_860.png 醉美水芙蓉 发表于 2024-1-15 21:30
老师可以一直循环链接吗？看到后面好像缺一张图片的样子！
怎么看到缺一张图片的？
这是同一张图片重复用了三次构成得无缝循环效果，并不是一张图片方案。 小辣椒 发表于 2024-1-15 21:55
难难太棒了，这个特效漂亮，以前收藏的特效基本都没有用了，难难这个效果画面流畅，歌词同步也是漂亮，特别 ...
https://chuangshicdn.mpres.51vv.com/v_block/f29ee0552b2f29a6fccab4f0fb6a676c.gif
https://img95.699pic.com/element/40123/0325.png_860.png 小辣椒 发表于 2024-1-15 21:56
欣赏难难的精彩制作，学习了，也是要套用一次玩玩
很笨的一种实现无缝循环方法，比单一图片的方案差远了。 红影 发表于 2024-1-15 21:56
漂亮的无缝链接滚动背景，这张图图选得漂亮，歌曲也选得好。欣赏难难好帖
https://chuangshicdn.mpres.51vv.com/v_block/f29ee0552b2f29a6fccab4f0fb6a676c.gif
https://img95.699pic.com/element/40123/0325.png_860.png
瞎凑合的帖子。 起个网名好难 发表于 2024-1-15 22:04
很笨的一种实现无缝循环方法，比单一图片的方案差远了。
谢谢难难的分享，我刚去做了一个试试，非常漂亮，我就是图没有选好，过几天选个图图做一次，今天太晚了 小辣椒 发表于 2024-1-15 22:35
谢谢难难的分享，我刚去做了一个试试，非常漂亮，我就是图没有选好，过几天选个图图做一次，今天太晚了
期待欣赏大作{:5_106:} 起个网名好难 发表于 2024-1-15 22:06
瞎凑合的帖子。
非常漂亮呢，很喜欢的效果{:4_199:} 好玩，点击参与了。 红影 发表于 2024-1-15 23:06
非常漂亮呢，很喜欢的效果
https://p5.itc.cn/q_70/images03/20210605/d200714b8bab480c8a45993e9bb0edd2.gif 庶民 发表于 2024-1-16 05:46
好玩，点击参与了。
https://p9.itc.cn/q_70/images03/20201202/63a8ddd1cec64c12bfc3e8e01ea3d1e9.gif 起个网名好难 发表于 2024-1-16 07:42
问好难难，上午好{:4_187:}
页:
[1]
2