论坛 › 音乐沙龙 › 笑纳 --- 花僮

红影 发表于 2023-5-11 14:14

起个网名好难 发表于 2023-5-10 22:54
查了一下我手机是828 × 1792，有个浏览器死活就转不过来而且画面不能左右移动，固定尺寸的帖就没完整看 ...

我很少手机看论坛，这个不太清楚。用单位的电脑看了一下，大小差不多{:4_204:}

起个网名好难 发表于 2023-5-11 16:33

本帖最后由 起个网名好难 于 2023-5-11 16:37 编辑 <br /><br /><style>
.lrcShow{font:bold 3vw 楷体;position:absolute;bottom:10px;height:auto;left:20%;color:lightgray;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;background-image:linear-gradient(180deg,hsl(20,100%,50%),hsl(50,100%,50%));-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%;}}       
#outframe        {
        width:1200px;height:800px;position: relative;box-shadow: 0 0 8px #000;margin: 100px 0 48px -300px;
        background: gray url(https://s3.bmp.ovh/imgs/2023/05/10/296548112ba1beee.png) center /cover;
        overflow:hidden;border-radius:24px;
}
</style>
<div id="outframe">
<css-doodle grid="16" id="flowers">
                :doodle {
                        @size: 100% 100%;
                        --flowerState:running;
                }
                position: absolute;
                left: @r(100)%;
                top: -20%;
                :after {
                        position: absolute;
                        content: @p(&#127802;,&#128174;);
                        color: snow;
                        font-size: @r(0.3, 1)vw;
                }
                animation: fall @r(8,20)s @r(-6, 6)s infinite var(--flowerState);
                @keyframes fall {
                        0% { top: -20%; transform: rotate(0deg); }
                        100% {top: 120%; transform: rotate(360deg); }
                }
        </css-doodle>
        <div class="lrcShow" data-lrc="点击启动播放">点击启动播放</div>
</div>

<!-- src="lrcPlayerSs.js" -->
<script type="text/javascript" >
let scriptEle = document.createElement('script');
scriptEle.setAttribute('type','text/javascript');
scriptEle.setAttribute('src','https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js');
document.head.appendChild(scriptEle);

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;}('K I=l(){u 4.12.1L(4,18)};I.1a={17:I,12:l(J){v=J.y.G(/(^\\s*)|(\\s*$)/g,\'\');4.6=V.16(\'.1f\');4.9=4.X(v);4.T(J.1b)},X:l(v){K p=v.G(/(^\\s*)|(\\s*$)/g,"").O(/\\r|\\n|\\r\\n/);K 7=19 1c();E(Y o=0;o<p.f;o++){Y t=p.1d(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);j(t){F=p.1i(\']\');j(F>0)y=p.Q(F+1);E(m=0;m<t.f;m++){B=t.Q(1).G(\']\',\'\').O(/:/);x=(+B)*1e+(+B);j(7.f==0&&x!=0){7.S({e:0,C:\'\\1h\\U\\U\\1g\\15\\14\\13\'})}7.S({e:+x.A(2),C:y})}}}7.1j(l(a,b){u(a.e-b.e)});E(k=0;k<7.f-1;k++){7.H=+(7.e-7.e).A(2)}u 7},P:l(D){4.6.1C=4.6.1z.1A=4.9.C;4.6.c.h(\'--1B\',\'1K\'+(4.8%2));4.6.c.h(\'--D\',D+\'s\');4.6.c.h(\'--M\',\'w\');4.8++},T:l(W){4.5=V.1M("Z");4.5.1J=z;4.5.1G=z;4.5.1H=1I;4.5.1o=W;4.6.1p(4.5);4.8=0;4.5.i(\'1q\',()=>{4.8=0;4.5.q()});4.5.i(\'1k\',()=>{4.9.H=+(4.5.1w-4.9.e).A(2)});4.5.i(\'q\',()=>{4.6.c.h(\'--M\',\'w\');11.c.h(\'--10\',\'w\')});4.5.i(\'N\',()=>{j(4.8==1&&4.5.R<1){4.5.q();u z}4.6.c.h(\'--M\',\'L\');11.c.h(\'--10\',\'L\')});4.5.i(\'1r\',()=>{1s.1y("Z 1t, 1u q 1x 1v");4.6.c.1m=\'1l\';4.6.1n(4)});4.5.i(\'1D\',()=>{j(4.8<4.9.f){j(4.5.R>=4.9.e){4.P(4.9.H)}}});4.6.i(\'1F\',()=>{j(4.5.L){4.5.q()}1E{4.5.N()}})}}',62,111,'||||this|mObj|lrcShowObj|lrcs|idx|lrcVec|||style||seconds|length||setProperty|addEventListener|if||function|||index|parts|play|||chkTime|return|lyricTxt|running|_0|lrcTxt|false|toFixed|ta|words|durTime|for|tIdx|replace|dur|lrcPlayerY|opts|var|paused|aniPlayState|pause|split|showLrc|substr|currentTime|push|genPlayer|u0020|document|mUrl|handleLrc|let|audio|flowerState|flowers|init|u8f7b|u5e74|u66fe|querySelector|constructor|arguments|new|prototype|audioURL|Array|match|60|lrcShow|u4e5f|u00A9|lastIndexOf|sort|canplay|none|display|removeChild|src|appendChild|ended|error|console|wrong|remove|event|duration|start|log|dataset|lrc|aniName|innerHTML|timeupdate|else|click|muted|autoplay|true|loop|bgMove|apply|createElement'.split('|'),0,{}))



var lrctxt = `
笑纳(DJ沈念版) - 花僮
词：周仁
曲：古月
撑伞接落花
看那西风骑瘦马
谁能为我一眼望穿流霞
公子是你吗
前面深山谁人家
暮夜抚一曲琵琶
我欲提笔为汝一幅画
佳人请笑纳

挑灯看遍长街的繁华
白胡子老者 临摹入画
一番寒暄 附和月色无暇
忽然清风 惹一池落花
三两知己结伴的仲夏
夜市闹三更 不想回家
星光洒落 老树的枝丫
马蹄浅浅 落一身风沙
撑伞接落花
看那西风骑瘦马
谁能为我一眼望穿流霞
公子是你吗
前面深山谁人家
暮夜抚一曲琵琶
我欲提笔为汝一幅画
佳人请笑纳
撑伞接落花
看那西风骑瘦马
谁能为我熬一缕青发
那人是你吗
谁在窃语谱情话
红尘故事在牵挂
夜风微凉烛影暖心啊
我悠歌把月光请笑纳

挑灯看遍长街的繁华
白胡子老者 临摹入画
一番寒暄 附和月色无暇
忽然清风 惹一池落花
三两知己结伴的仲夏
夜市闹三更 不想回家
星光洒落 老树的枝丫
马蹄浅浅 落一身风沙
撑伞接落花 看那西风骑瘦马
谁能为我一眼望穿流霞
公子是你吗
前面深山谁人家
暮夜抚一曲琵琶
我欲提笔为汝一幅画
佳人请笑纳
撑伞接落花
看那西风骑瘦马
谁能为我熬一缕青发
那人是你吗
谁在窃语谱情话
红尘故事在牵挂
夜风微凉烛影暖心啊
我悠歌把月光请笑纳

`;
var opts = {
    lrcTxt:lrctxt,
    audioURL:"https://pan.111t.net/view.php/cdd81daa61c76d4d025bc9d7652d82aa.mp4",
}
new lrcPlayerY(opts);
</script>

起个网名好难 发表于 2023-5-11 16:36

红影 发表于 2023-5-11 14:14
我很少手机看论坛，这个不太清楚。用单位的电脑看了一下，大小差不多

看看这个固定尺寸（1200x800）1楼差别大吗。

查看完整版本: 笑纳 --- 花僮