笑纳 --- 花僮
本帖最后由 起个网名好难 于 2023-5-10 21:24 编辑 <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:60vw;height:40vw;position: relative;box-shadow: 0 0 8px #000;margin: 100px 0 48px -12vw;
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(🌺,💮);
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> 好美的画面，欣赏问好！{:4_187:} 问好老师！美帖收藏待用！谢谢了！{:4_190:} 这样的背景加上花瓣缤纷也很漂亮呢。欣赏难难好帖{:4_187:} 这个原图挺大的，怎么我这里显示出来貌似挺小的呢？ 梦缘 发表于 2023-5-10 20:44
好美的画面，欣赏问好！
谢谢支持与欣赏，晚上好！ 亦是金 发表于 2023-5-10 20:56
问好老师！美帖收藏待用！谢谢了！
谢谢支持与欣赏，晚上好！ 醉美水芙蓉 发表于 2023-5-10 21:01
欣赏老师佳作！
谢谢支持与欣赏，晚上好！ 红影 发表于 2023-5-10 21:03
这样的背景加上花瓣缤纷也很漂亮呢。欣赏难难好帖
谢谢支持与欣赏，晚上好！ 评分后跳转。所以不建议使用document.write 红影 发表于 2023-5-10 21:04
这个原图挺大的，怎么我这里显示出来貌似挺小的呢？
图片匹配屏幕的大小， 我这显示是1152x768， 原图是1000x666
手机上就有点小了 马黑黑 发表于 2023-5-10 21:14
评分后跳转。所以不建议使用document.write
接受建议，马上去改过。这样写是因为简单，偷懒。 起个网名好难 发表于 2023-5-10 21:15
图片匹配屏幕的大小， 我这显示是1152x768， 原图是1000x666
手机上就有点小了
我是电脑上看的啊，奇怪的是，我这里显示的只有820宽约540高。可能还是我电脑的问题吧。 起个网名好难 发表于 2023-5-10 21:09
谢谢支持与欣赏，晚上好！
客气了，问好难难，晚上好{:4_187:} 红影 发表于 2023-5-10 21:26
我是电脑上看的啊，奇怪的是，我这里显示的只有820宽约540高。可能还是我电脑的问题吧。
可能是你的电脑屏幕不够大，这图片的显示大小是宽为60%屏幕宽 高为40%屏幕宽。
我的屏幕分辨率是1920x1024 红影 发表于 2023-5-10 21:26
我是电脑上看的啊，奇怪的是，我这里显示的只有820宽约540高。可能还是我电脑的问题吧。
说屏幕宽度并不严格，实际应该是与窗口可见区域大小对应，把窗口缩放一下画面会随之变化。 起个网名好难 发表于 2023-5-10 21:30
可能是你的电脑屏幕不够大，这图片的显示大小是宽为60%屏幕宽 高为40%屏幕宽。
我的屏幕分辨率是1920x ...
嗯，我明天去单位再看看，单位的那个电脑分辨率比较大。 起个网名好难 发表于 2023-5-10 21:39
说屏幕宽度并不严格，实际应该是与窗口可见区域大小对应，把窗口缩放一下画面会随之变化。
一般都是古董尺寸，这样根据分辨率设定尺寸还是不常见的{:4_173:} 红影 发表于 2023-5-10 22:00
一般都是古董尺寸，这样根据分辨率设定尺寸还是不常见的
如果用固定的尺寸在我的手机上看不全，这样设置手机上也可以看全了虽然有点小。