我爱你，塞北的雪 TO：樵哥哥 国庆节快乐！
<style>#tz {
margin: 150px 0 10px calc(50% - 801px);
width: 1440px;
height: 790px;
bbbbbackground: url('https://xlaj.cn/upfile/202410/01/6F.jpg') no-repeat center/cover;
box-shadow: 3px 3px 6px rgba(0,0,0,.6);
overflow: hidden;
z-index: 1;
position: relative;
}
#player {
position: absolute;
left: calc(86% - 100px);
top: calc(70% - 20px);
cursor: pointer;
animation: rot 10s linear infinite var(--state);
}
use:nth-child(odd) { --bg: snow; }
use:nth-child(even) { --bg: palevioletred; }
@keyframes rot {
to { transform: rotate(360deg); }
}
#dt2{ position: absolute; width:600px; height: 450px; top: 20px; left: 800px; }
#dt3{ position: absolute; width: 1000px; height: 700px; top: 10px; left: 80px; }
#dt4{ position: absolute; width: 1000px; height: 700px; top: 5px; left: 768px; }
#dt5{ position: absolute; width: 185px; height: 51px;bottom: 10px; right: 130px; }
#dt6{ position: absolute; width: 173px; height: 114px; top: 130px; left: 440px; }
.lrcShow {
font:normal 30px sans-serif;
position:absolute;
right:15%;
bottom:10px;
z-index:9;
color:rgb(173,216,230);
filter:drop-shadow(1px 1px 1px black);
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:brown;
background-image:url( );
-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 bgMove0 { from { width: 0%; } to { width: 100%; } }
@keyframes bgMove1 { from { width: 0%; } to { width: 100%; } }
</style>
<div id="tz" style="--state: paused;">
<img class="dynpic" id="dt1" src="https://wj1.zp68.com:812/lxx/yunhua/20211117/6F.gif" alt="">
<img class="dynpic" id="dt2" src="https://wj1.zp68.com:812/lxx/yunhua/2023/08/22/4n.gif" alt="">
<img class="dynpic" id="dt3" src="https://xlaj.cn/upfile/202410/01/xiax.gif " alt="">
<img class="dynpic" id="dt4" src="https://xlaj.cn/upfile/202410/01/xiax.gif " alt="">
<img id="dt5" src="https://xlaj.cn/upfile/202410/01/2.png" alt="" >
<img id="dt6" src="https://xlaj.cn/upfile/202410/01/e1.png" alt="" >
<svg id="player" width="150" height="150" viewBox="0 0 200 200">
<title id="tt">播放/暂停</title>
<defs>
<g id="p1" fill="none" stroke="var(--bg)" stroke-width="4" stroke-linecap="round" stroke-dasharray="4 6">
<path id="p1" d="M10 100 Q50 270,100 100 T 190 100">
<animate attributeName="stroke-dashoffset" from="80" to="0" dur="2s" repeatCount="indefinite"></animate>
</path>
</g>
</defs>
<use href="#p1" transform="rotate(0 100 100)"></use>
<use href="#p1" transform="rotate(30 100 100)"></use>
<use href="#p1" transform="rotate(60 100 100)"></use>
<use href="#p1" transform="rotate(90 100 100)"></use>
<use href="#p1" transform="rotate(120 100 100)"></use>
<use href="#p1" transform="rotate(150 100 100)"></use>
</svg>
<div class="lrcShow" data-lrc="我爱你，塞北的雪" >我爱你，塞北的雪</div>
</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;}('6(\'p\'z l.j(\'3\')){g.n.y=k(){6(2.b){2.b.q.x(2.b);2.b=A;2.5.s=\'\'}6(2.c){2.a=2.c}};g.n.w=k(){v 7=2.a.m(-4);6(7==\'.\')7=7.m(1);6(7==\'u\')7=\'B\';2.r=\'J/\'+7;o 3=l.j(\'3\');o 9=2.9,8=2.8;6(9&&8){6(!2.c){2.c=2.a}3.9=9;3.8=8;3.5.f=2.5.f;3.5.d=2.5.d;3.5.h=2.5.h;3.5.i=2.5.i;3.p(\'D\').F(2,0,0,9,8);G{2.a=3.E(2.r)}C(e){2.H(\'a\');3.5.K=\'I\';2.q.t(3,2);2.5.s=\'0\';2.b=3}}}}',47,47,'||this|canvas||style|if|suff|height|width|src|storeCanvas|storeUrl|left||top|HTMLImageElement|right|bottom|createElement|function|document|substr|prototype|var|getContext|parentElement|type|opacity|insertBefore|jpg|let|stop|removeChild|play|in|null|jpeg|catch|2d|toDataURL|drawImage|try|removeAttribute|absolute|image|position'.split('|'),0,{}))
// 歌词同步代码
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;}('C D=f(){x 4.Z.1n(4,18)};D.19={12:D,Z:f(F){v=F.I.J(/(^\\s*)|(\\s*$)/g,\'\');4.6=w.E(\'.1d\');4.1c=w.E(\'.1f\');4.P=w.E(\'.P\');4.9=4.N(v);4.R(F.1g);4.1e=u},N:f(v){C o=v.J(/(^\\s*)|(\\s*$)/g,"").T(/\\r|\\n|\\r\\n/);C 7=1m 1k();B(V h=0;h<o.e;h++){V q=o.1i(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);l(q){G=o.1j(\']\');l(G>0)I=o.W(G+1);B(m=0;m<q.e;m++){K=q.W(1).J(\']\',\'\').T(/:/);H=(+K)*17+(+K);l(7.e==0&&H!=0){7.S({c:0,z:\'\\1a\\O\\O\\1I\\1J\\1K\\1H\'})}7.S({c:+H.y(2),z:I})}}}7.1F(f(a,b){x(a.c-b.c)});B(k=0;k<7.e-1;k++){7.L=+(7.c-7.c).y(2)}x 7},10:f(A){4.6.1L=4.6.1t.1s=4.9.z;4.6.i.p(\'--1u\',\'1p\'+(4.8%2));4.6.i.p(\'--A\',A+\'s\');4.6.i.p(\'--M\',\'X\');4.8++},R:f(Y){4.5=w.1r("U");4.5.1q=u;4.5.1B=u;4.5.1A=1D;4.5.1C=Y;4.6.1x(4.5);4.8=0;4.5.j(\'1w\',()=>{4.8=0;4.5.t()});4.5.j(\'1z\',()=>{4.9.L=+(4.5.1y-4.9.c).y(2)});4.5.j(\'t\',()=>{4.6.i.p(\'--M\',\'X\')});4.5.j(\'1o\',()=>{l(4.8==1&&4.5.Q<1){4.5.t();x u}4.6.i.p(\'--M\',\'1v\')});4.5.j(\'1M\',()=>{1G.1E("U 16, 15 t 11 13");4.6.i.14=\'1b\';4.6.1l(4)});4.5.j(\'1h\',()=>{l(4.8<4.9.e){l(4.5.Q>=4.9.c){4.10(4.9.L)}}})}}',62,111,'||||this|mObj|lrcShowObj|lrcs|idx|lrcVec|||seconds||length|function||index|style|addEventListener||if|||parts|setProperty|chkTime|||play|false|lyricTxt|document|return|toFixed|words|durTime|for|var|lrcPlayerY|querySelector|opts|tIdx|_0|lrcTxt|replace|ta|dur|aniPlayState|handleLrc|u0020|progMeter|currentTime|genPlayer|push|split|audio|let|substr|running|mUrl|init|showLrc|start|constructor|event|display|remove|wrong|60|arguments|prototype|u00A9|none|indicator|lrcShow|mseek|slider|audioURL|timeupdate|match|lastIndexOf|Array|removeChild|new|apply|pause|bgMove|loop|createElement|lrc|dataset|aniName|paused|ended|appendChild|duration|canplay|autoplay|muted|src|true|log|sort|console|u8f7b|u4e5f|u66fe|u5e74|innerHTML|error'.split('|'),0,{}))
let lrctxt = `
我爱你，塞北的雪 - 殷秀梅\n 词：王德\n 曲：刘锡津\n 我爱你 塞北的雪\n 飘飘洒洒漫天遍野\n 你的舞姿是那样的轻盈\n 你的心地是那样的纯洁\n 你是春雨的亲姐妹哟\n 你是春天派出的使节\n 春天的使节\n\n 我爱你 塞北的雪\n 飘飘洒洒漫天遍野\n 你用白玉般的身躯\n 装扮银光闪闪的世界\n 你把生命溶进土地哟\n 滋润着返青的麦苗\n 迎春的花叶\n 啊 我爱你\n 啊…………\n塞北的雪 \n塞北的雪\n\n`;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://file.uhsea.com/2410/299586633615a9062b27c05f41a899ad65.mp3"
}
let yP = new lrcPlayerY(opts);
var dynpics = document.querySelectorAll('.dynpic');
player.onclick = () =>{dynpics.forEach(pic => yP.mObj.paused ? pic.play() : pic.stop()); yP.mObj.paused ? (yP.mObj.play(), player.unpauseAnimations()) : (yP.mObj.pause(), player.pauseAnimations())}
</script>
@樵歌
樵哥哥国庆节快乐！谢谢樵哥哥一直以来对小辣椒的关心和爱护，感激之心永远在我的心里{:4_179:} @马黑黑
学习套用做一个黑黑的Entropy播放器效果 辣椒的动图总是用得这么好，这个雪景太漂亮了 绿叶清舟 发表于 2024-10-3 20:58
辣椒的动图总是用得这么好，这个雪景太漂亮了
清舟仔细看看代码就知道，这个动图是以前的旧图，我加了遮盖的效果，把以前的标题字遮住了{:4_173:} 喜欢，喜欢，喜欢，喜欢的事儿要说三遍的。{:4_205:} 小辣椒国庆快乐，现下杭州总凉快了吧，没出门玩呀。我出了两天门，到省城串朋友了。{:4_183:} 喜欢雪景，喜欢滑雪的人儿，喜欢这动听的歌声，更喜欢制作帖子送我的人{:4_179:} 都送我好一大堆礼物了，我还没还呢。{:4_201:} 小辣椒 发表于 2024-10-3 20:56
@樵歌
樵哥哥国庆节快乐！谢谢樵哥哥一直以来对小辣椒的关心和爱护，感激之心永远在我的心里
是您在樵哥哥病中一直问候关怀着，樵哥哥很感动呢。
樵哥哥百年以后，准备永远活在你们心里{:4_170:} 哎呀，这个有趣 这雪景太美了，雪地上还有那么多快乐的人群。
这小播用在这里也特别合适。欣赏亲爱的好帖{:4_199:} 樵歌 发表于 2024-10-3 21:11
喜欢，喜欢，喜欢，喜欢的事儿要说三遍的。
樵哥哥喜欢太好了，节日快乐！ 樵歌 发表于 2024-10-3 21:12
小辣椒国庆快乐，现下杭州总凉快了吧，没出门玩呀。我出了两天门，到省城串朋友了。
没有出门，节日外面人山人海，就家里吃吃喝喝 樵歌 发表于 2024-10-3 21:17
是您在樵哥哥病中一直问候关怀着，樵哥哥很感动呢。
樵哥哥百年以后，准备永远活在你们心里
哇塞，樵哥哥其实我知道你对小辣椒的好，我一直心里感激的 樵歌 发表于 2024-10-3 21:15
都送我好一大堆礼物了，我还没还呢。
你千万暂时少玩，身体注意 马黑黑 发表于 2024-10-3 21:31
哎呀，这个有趣
黑黑晚上好{:4_187:} 红影 发表于 2024-10-3 21:38
这雪景太美了，雪地上还有那么多快乐的人群。
这小播用在这里也特别合适。欣赏亲爱的好帖
亲爱的，晚上好，旧图玩玩，套用玩一个黑黑的播放器效果 画面清爽漂亮。 小辣椒 发表于 2024-10-3 21:47
亲爱的，晚上好，旧图玩玩，套用玩一个黑黑的播放器效果
这个旧图选得好，特别适合这个小播呢，这画面太美了，每次看到都喜欢{:4_199:}