憨憨
本帖最后由 起个网名好难 于 2024-5-17 16:43 编辑 <br /><br /><style>#oBlk {
width: 1120px;
height: 630px;
overflow: hidden;
position: relative;
margin: 16px auto 32px calc(50% - 641px);
border-radius:24px;
box-shadow:4px 4px 10px black;
}
.vid {
position: absolute;
left: 0px;
bottom: 0px;
width: 110%;
}
.lrcShow{font:bold 3em sans-serif;position:absolute;width:80%;height:2em;bottom:0px;left:10%;color:transparent;filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;background:repeating-linear-gradient(45deg,white 1px,transparent 2px,gray 4px),repeating-linear-gradient(-45deg,white 1px,transparent 2px,gray 4px);-webkit-background-clip:text;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:url(https://z4a.net/images/2024/01/14/auewj-fb7cv.jpg);-webkit-background-clip:text;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%;}}#bfctl{bottom:2%;right:2%;position:absolute;overflow:hidden;width:120px;height:120px;cursor:pointer;}#disc{position:absolute;top:0px;left:0px;width:80%;height:80%;border-radius:50%;border:2px solid #000;background:url("https://pic.imgdb.cn/item/642d9c53a682492fcccad99f.png") center/cover no-repeat,url("https://img2.kuwo.cn/star/albumcover/500/s3s39/51/406641070.jpg") no-repeat center / 50%;animation:spin 10s infinite linear;}@keyframes spin{100%{transform:rotate(360deg);}}#pickupArm{position:absolute;top:1%;right:0.5%;width:40px;height:95px;background:url("https://pic.imgdb.cn/item/65ffbbe89f345e8d036024a8.png") no-repeat 0px 0px / 100%;}.bfpause{transform-origin:100% 0%;transform:rotate(-16deg);}#indicator{position:absolute;left:20%;bottom:10px;width:60%;margin:10px auto;appearance:none;height:8px;overflow:hidden;border-radius:8px;cursor:pointer;}#indicator::-webkit-progress-bar{background:pink;}#indicator::-webkit-progress-value{background:hsl(125,72%,72%);}.lrcShow{font-size:2em;top:10px;left:30%;}.lrcShow::before{color:transparent;background:url('https://img95.699pic.com/xsj/1r/uu/zw.jpg') center/cover;-webkit-background-clip:text;background-clip:text;}
</style>
<div id="oBlk">
<video src="https://img.tukuppt.com/video_show/2462140/00/01/56/5b49fe5a42318.mp4" loop autoplay muted class="vid"></video>
<video src="https://img.tukuppt.com/video_show/2418175/00/17/06/5eb898959c56c.mp4" loop autoplay muted class="vid" style="opacity:0.52"></video>
<div id="bfctl">
<div id="disc"></div>
<div id="pickupArm"></div>
</div>
<div class="lrcShow" data-lrc="LRC"></div>
<progress value='0.0' max='100.0' id='indicator'></progress>
</div>
<script>
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('M H=l(){w 4.Q.1i(4,1j)};H.1k={1f:H,Q:l(v){x=v.B.K(/(^\\s*)|(\\s*$)/g,\'\');4.6=O.1h(\'.1l\');4.u=v.u;4.9=4.R(x);4.P(v.1p)},R:l(x){M o=x.K(/(^\\s*)|(\\s*$)/g,"").S(/\\r|\\n|\\r\\n/);M 7=1m 1n();y(W j=0;j<o.f;j++){W t=o.1o(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);e(t){G=o.15(\']\');e(G>0)B=o.U(G+1);y(m=0;m<t.f;m++){L=t.U(1).K(\']\',\'\').S(/:/);A=(+L)*18+(+L);e(7.f==0&&A!=0){7.T({c:0,C:\'\\1a\\V\\V\\1L\\1M\\1N\\1K\'})}7.T({c:+A.z(2),C:B})}}}7.1I(l(a,b){w(a.c-b.c)});y(k=0;k<7.f-1;k++){7.I=+(7.c-7.c).z(2)}w 7},Z:l(D){4.6.1w=4.6.1x.1y=4.9.C;4.6.i.p(\'--1v\',\'1s\'+(4.8%2));4.6.i.p(\'--D\',D+\'s\');4.6.i.p(\'--E\',\'10\');4.8++},P:l(N){4.5=O.1D("X");4.5.1E=F;4.5.1F=F;4.5.1C=1z;4.5.1A=N;4.6.1B(4.5);4.8=0;4.5.h(\'1u\',()=>{4.8=0;4.5.q()});4.5.h(\'1t\',()=>{4.9.I=+(4.5.11-4.9.c).z(2)});4.5.h(\'q\',()=>{4.6.i.p(\'--E\',\'10\')});4.5.h(\'Y\',()=>{e(4.8==1&&4.5.J<1){4.5.q();w F}4.6.i.p(\'--E\',\'12\')});4.5.h(\'1H\',()=>{1J.1G("X 1d, 19 q 1b 1e");4.6.i.1c=\'17\';4.6.13(4)});4.5.h(\'16\',()=>{e(4.u){4.u.14=4.5.J/4.5.11*1r}e(4.8<4.9.f){e(4.5.J>=4.9.c){4.Z(4.9.I)}}});4.6.h(\'1q\',()=>{e(4.5.12){4.5.q()}1g{4.5.Y()}})}}',62,112,'||||this|mObj|lrcShowObj|lrcs|idx|lrcVec|||seconds||if|length||addEventListener|style|index||function|||parts|setProperty|play|||chkTime|indicator|opts|return|lyricTxt|for|toFixed|_0|lrcTxt|words|durTime|aniPlayState|false|tIdx|lrcPlayerY|dur|currentTime|replace|ta|var|mUrl|document|genPlayer|init|handleLrc|split|push|substr|u0020|let|audio|pause|showLrc|running|duration|paused|removeChild|value|lastIndexOf|timeupdate|none|60|remove|u00A9|start|display|wrong|event|constructor|else|querySelector|apply|arguments|prototype|lrcShow|new|Array|match|audioURL|click|100|bgMove|canplay|ended|aniName|innerHTML|dataset|lrc|true|src|appendChild|autoplay|createElement|loop|muted|log|error|sort|console|u8f7b|u4e5f|u66fe|u5e74'.split('|'),0,{}))
{
let lrcTxt = `
憨憨-华乐(乔茜)
我是一个憨憨
天天只会上班
上班为了下班
工资只够三餐
爱情与我无关
整天郁郁寡欢
谁来给我温暖
画大饼也浪漫
乞丐都能挑天气去要饭
我却每天风雨无阻去上班
卷又卷不赢 摆又摆不烂
努力和享受之间灵活切换
上帝撒智慧时我撑了伞
成了笨蛋相信公鸡会生蛋
大脑反应慢 思维不连贯
被谁都能忽悠得团团转
我是一个憨憨
天天只会上班
上班为了下班
工资只够三餐
爱情与我无关
整天郁郁寡欢
谁来给我温暖
画大饼也浪漫
我是一个憨憨
夜夜熬到很晚
每天都很孤单
想恋爱又不敢
比起寂寞孤单
我更害怕人散
爱能制造浪漫
也能制造遗憾
上帝撒智慧时我撑了伞
成了笨蛋相信公鸡会生蛋
大脑反应慢 思维不连贯
被谁都能忽悠得团团转
我是一个憨憨
天天只会上班
上班为了下班
工资只够三餐
爱情与我无关
整天郁郁寡欢
谁来给我温暖
画大饼也浪漫
我是一个憨憨
夜夜熬到很晚
每天都很孤单
想恋爱又不敢
比起寂寞孤单
我更害怕人散
爱能制造浪漫
也能制造遗憾
我是一个憨憨
天天只会上班
上班为了下班
工资只够三餐
爱情与我无关
天天郁郁寡欢
谁来给我温暖
画大饼也浪漫
我是一个憨憨
夜夜熬到很晚
每天都很孤单
想恋爱又不敢
比起寂寞孤单
我更害怕人散
爱能制造浪漫
也能制造遗憾
`;
let opts = {
lrcTxt: lrcTxt,
//audioURL: "https://www.kumeiwp.com/sub/filestores/2024/05/04/8ba36e0835e791ff14529639495091a0.mp3", //
audioURL: "https://file.uhsea.com/2405/05428b4fca2043b57b2c3841be70b519YV.mp3"
}
let playerY = new lrcPlayerY(opts);
bfctl.onclick = () => {
playerY.mObj.paused ? (playerY.mObj.play(), pickupArm.classList.remove('bfpause'), disc.style.animationPlayState = 'running') : (playerY.mObj.pause(), pickupArm.classList.add('bfpause'), disc.style.animationPlayState = 'paused', aniObj.pause());
}
playerY.mObj.addEventListener('timeupdate', function() {
if (indicator) {
indicator.value = this.currentTime / this.duration * 100;
}
});
let vidObjs = document.getElementsByClassName('vid');
bfctl.onclick = () => {
playerY.mObj.paused ? (playerY.mObj.play(), pickupArm.classList.remove('bfpause'), disc.style.animationPlayState = 'running', vidObjs.play(), vidObjs.play()) : (playerY.mObj.pause(), pickupArm.classList.add('bfpause'), disc.style.animationPlayState = 'paused', vidObjs.pause(), vidObjs.pause());
}
playerY.mObj.addEventListener('timeupdate', function() {
if (indicator) {
indicator.value = this.currentTime / this.duration * 100;
}
});
}
</script>
这首歌真好玩，真的太现实了{:4_187:} 这帖子里的视频用得特别好，跟歌词完全相配。欣赏难难好帖{:4_199:} 红影 发表于 2024-5-4 19:43
这首歌真好玩，真的太现实了
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 醉美水芙蓉 发表于 2024-5-4 20:38
欣赏老师美贴！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 红影 发表于 2024-5-4 19:46
这帖子里的视频用得特别好，跟歌词完全相配。欣赏难难好帖
https://5b0988e595225.cdn.sohucs.com/images/20181011/751af9a04b924647a7baeb97f0f28ab6.gif 起个网名好难 发表于 2024-5-4 20:47
这个帖子特别实际，歌词好玩，看到卷又卷不赢，摆又摆不烂，觉得太有趣了{:4_173:} 起个网名好难 发表于 2024-5-4 20:48
问好难难，晚上好{:4_187:} 红影 发表于 2024-5-4 21:19
这个帖子特别实际，歌词好玩，看到卷又卷不赢，摆又摆不烂，觉得太有趣了
微信视频看到的感觉蛮有味的。 起个网名好难 发表于 2024-5-4 21:22
微信视频看到的感觉蛮有味的。
这个特别符合当今人们的心态呢{:4_173:} 红影 发表于 2024-5-4 22:14
这个特别符合当今人们的心态呢
那视频是个女孩唱歌，动作特别滑稽{:5_106:} 起个网名好难 发表于 2024-5-4 22:24
那视频是个女孩唱歌，动作特别滑稽
难难的这个效果也很好，更符合歌曲意境呢{:4_187:} 红影 发表于 2024-5-4 22:57
难难的这个效果也很好，更符合歌曲意境呢
https://5b0988e595225.cdn.sohucs.com/images/20191109/bae98751119d4af7b8e60d48b9bee2e9.gif 好好好 起个网名好难 发表于 2024-5-5 06:34
这个歌词同步特别炫，看着这样的歌曲，觉得特别有趣{:4_187:} 小文 发表于 2024-5-5 09:07
好好好
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 红影 发表于 2024-5-5 10:38
这个歌词同步特别炫，看着这样的歌曲，觉得特别有趣
是吗，我只是觉得歌曲有点意思。 起个网名好难 发表于 2024-5-5 12:22
是吗，我只是觉得歌曲有点意思。
这个歌词同步的效果也做得特别好呢{:4_187:} 红影 发表于 2024-5-5 19:51
这个歌词同步的效果也做得特别好呢
LRC歌词和歌曲MP3全是网上找的，自己做费劲。
页:
[1]
2