欢迎克隆咱就来克个隆

一师

[i=s] 本帖最后由 一师 于 2022-7-26 20:23 编辑 [/i]

[i=s] 本帖最后由 亚伦影音工作室 于 2022-4-5 12:26 编辑 [/i]

一师

1. <style type="text/css">
   
2. .photo {width: 1000px;
   
3.   height: 600px;
   
4.   position: absolute;top:0px; left:0px;
   
5. filter:contrast(130%)brightness(100%);
   
6.   animation: round 46s infinite;
   
7.   opacity: 0;
   
8. }
   
9. 
   
10. @keyframes round {28% {
    
11.     opacity: 0;transform:translate(0%,0%)scale(4.4);
    
12.   }
    
13. 
    
14.   4% {
    
15.     opacity: 1;transform:translate(0%,0%)scale(1);
    
16.   }
    
17. 
    
18. }
    
19. img:nth-child(8) {
    
20.   animation-delay: 40s;
    
21. }
    
22. 
    
23. img:nth-child(7) {
    
24.   animation-delay: 34s;
    
25. }
    
26. 
    
27. img:nth-child(6) {
    
28.   animation-delay: 28s;
    
29. }
    
30. 
    
31. img:nth-child(5) {
    
32.   animation-delay: 22s;
    
33. }
    
34. img:nth-child(4) {
    
35.   animation-delay: 16s;
    
36. }
    
37. 
    
38. img:nth-child(3) {
    
39.   animation-delay: 12s;
    
40. }
    
41. 
    
42. img:nth-child(2) {
    
43.   animation-delay: 6s;
    
44. }
    
45. 
    
46. 
    
47. </style >
    
48. <div style="z-index: 127;width: 1000px; height: 600px; margin-top:50px; margin-left:-230px;  box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; overflow: hidden;transform:  rotate(0deg);background-size: 100%
    
49. 100%;background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/30%  30%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000); text-align: center;">
    
50. 
    
51.   <img class='photo'  src="http://chuangshicdn.data.mvbox.cn/album/22/03/06/22030614333835236148.jpg" alt="" />
    
52.   <img class='photo'  src="http://chuangshicdn.data.mvbox.cn/album/22/03/06/22030614325950787947.jpg" alt="" />
    
53.   <img class='photo'  src="http://chuangshicdn.data.mvbox.cn/album/21/09/17/21091709022912212887.jpg" alt="" />
    
54.   <img class='photo'  src="http://chuangshicdn.data.mvbox.cn/album/22/03/06/22030614351725693123.jpg" alt="" />
    
55. <img class='photo'  src="https://img-baofun.zhhainiao.com/fs/d35a7602dacc4a4009d85a9896c146c1.jpg" alt="" />
    
56.   <img class='photo'  src="http://chuangshicdn.data.mvbox.cn/album/22/03/06/22030614340555739676.jpg" alt="" />
    
57.   <img class='photo'  src="https://img-baofun.zhhainiao.com/fs/d379de6a6004bf2cfd47de40813702c6.jpg" alt="" />
    
58.   <img class='photo'  src="https://img-baofun.zhhainiao.com/fs/9df00f9490c961d491dde8097c8cb5b5.jpg" alt="" />
    
59. 
    
60. 
    
61. <div  class="lrcShow" id='sLRC' ></div>
    
62.         <img src="http://image.hnol.net/c/2022-01/08/22/202201082235389221-5769293.png" id="mDisk" class='mCtrl'/>
    
63. <div id="flip-wrapper">
    
64. <div id="flip-content">
    
65.   <div class="face">
    
66.   </div>
    
67.   <div class="back face">
    
68.   </div>
    
69. 
    
70. </div>
    
71. </div>
    
72. </div>
    
73. <style type="text/css">
    
74. .lrcShow{width:80%;height:120px;overflow:hidden;position:absolute;bottom:0px;left:10%;z-index: 100;}
    
75. .lrcShow ul{width:100%;padding:0;list-style:none;transition:0.3s all ease;margin:0;}
    
76. .lrcShow ul li{filter:drop-shadow(1px 0 0 #ffffff ) drop-shadow(0 1px 0 #ffffff)drop-shadow(-1px 0 0 #ffffff) drop-shadow(0 -1px 0 #ffffff);height:70px;line-height:80px;font-family:华文行楷;font-size:0px;color:#red;font-weight:normal;transition:.3s all ease;list-style-type:none;text-align:center;display:block;width:100%;margin:0 auto;}
    
77. .lrcShow ul li.active{font-size:50px;color:#ff0000;font-weight:bold;}
    
78. .mCtrl{border:2px solid #000000;border-radius:50%;display:inline;block;width:90px;height:90px;margin:0px;position:absolute;bottom:30px;right:30px;transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);z-index: 100;}.z360z{animation:rotating 10s linear infinite;}@keyframes rotating{0%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}
    
79. 100%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(360deg);}}
    
80. .lrcShow{animation:slider 0.26s linear infinite;}@keyframes slider{from{filter:hue-rotate(360deg)contrast(180%)brightness(200%);}to{filter:hue-rotate(0deg) contrast(140%)brightness(100%);}}
    
81. </style>
    
82. <script>
    
83. document.write('<script src="http://cesholl.cn3v.work/scripts/lrcPlayerX.min.js" type="text/javascript"><\/script>');
    
84. eval(function(p,a,c,k,e,r){e=function(c){return(c<62?'':e(parseInt(c/62)))+((c=cb)>35?String.fromCharCode(c+29):c.toString(36))};if('0'.replace(0,e)==0){while(c--)r[e(c)]=k[c];k=[function(e){return r[e]||e}];e=function(){return'([4-9cefh-lo-qt-zA-Z]|1\\w)'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 E=7(e,f){h!!e.w.W(F X("(\\\\s|^)"+f+"(\\\\s|$)"))};6 Y=7(e,f){c(!E(e,f)){e.w+=" "+f}};6 G=7(e,f){c(E(e,f)){e.w=e.w.x(F X("(\\\\s|^)"+f+"(\\\\s|$)")," ")}};6 H=7(){h 4.Z.apply(4,arguments)};H.prototype={constructor:H,Z:7(k){y=k.I.x(/(^\\s*)|(\\s*$)/g,\'\');4.i=l.10(k.lrcShowID);4.j=l.10(k.j);4.o=4.11(y);4.i.J(4.12());4.13(k.audioURL)},11:7(y){6 p=y.x(/(^\\s*)|(\\s*$)/g,"").14(/\\r|\\n|\\r\\n/);6 q=F Array();z(K 5=0;5<p.t;5++){K A=p[5].W(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]/g);c(A){L=p[5].lastIndexOf(\']\');c(L>0)I=p[5].15(L+1);z(m=0;m<A.t;m++){M=A[m].15(1).x(\']\',\'\').14(/:/);N=(+M[0])*60+(+M[1]);c(q.t==0&&N!=0){q.16({u:0,O:\'\\u0026\\u0023\\u0031\\u0036\\u0039\\u003b\\u0020\\u4e5f\\u66fe\\u5e74\\u8f7b\'})}q.16({u:N,O:I})}}}h q.sort(7(a,b){h(a.u-b.u)})},12:7(){6 P=l.Q(\'ul\');z(K 5=0;5<4.o.t;5++){6 R=l.Q("li");R.innerText=4.o[5].O;P.J(R)}h P},13:7(18){4.8=l.Q("19");4.8.loop=1a;4.8.muted=1a;4.8.src=18;4.i.J(4.8);6 9=4;6 1b=0;4.8.v(\'ended\',7(){G(9.j,\'S\');4.B()});4.8.v(\'playing\',7(){Y(9.j,\'S\')});4.8.v(\'1c\',7(){G(9.j,\'S\')});4.8.v(\'error\',7(){1d.1e("19 wrong, 1f B start event");9.i.1g.display=\'none\';9.i.removeChild(4)});7 1h(){6 1i=9.8.currentTime+1b;z(6 5=0;5<9.o.t;5++){c(9.o[5].u>1i){h 5-1}}}4.8.v(\'timeupdate\',7(){6 5=1h();c(5==-1){h}6 T=70,1j=50;6 C=5*T+T/2-1j/2;c(C<0){C=0}6 D=9.i.getElementsByTagName(\'ul\');D[0].1g.marginTop=-C+"px";6 U=D[0].querySelector(".V");c(U){U.1k.1f("V")}D[0].children[5].1k.add("V")});4.j.onclick=7(){c(9.8.paused){9.8.B()}else{9.8.1c()}};try{4.8.B()}catch(1l){1d.1e(1l.message)}}}',[],84,'||||this|index|var|function|mObj|that|||if||elements|cName||return|showLrcObj|audioCtrl|opts|document|||lrcVec|parts|lrcs|||length|seconds|addEventListener|className|replace|lyricTxt|for|chkTime|play|top|ullrc|hasClass|new|removeClass|lrcPlayerX|lrcTxt|appendChild|let|tIdx|ta|_t|words|ulObj|createElement|liObj|z360z|lrc_li_height|activeLi|active|match|RegExp|addClass|init|getElementById|handleLrc|formLRCShow|genPlayer|split|substr|push||mUrl|audio|false|turn|pause|console|log|remove|style|getLrcIndex|time|lrc_ul_height|classList|err'.split('|'),0,{}))
    
85. </script>
    
86. 
    
87. <script type="text/javascript">
    
88. var lrc =`[00:00:01] 酒醉梦不醒 - 孙艺琪
    
89. [00:00:10] 作词：徐杰
    
90. [00:01:00] 作曲：陈伟
    
91. [00:01:00] 制作人：亚伦
    
92. [00:32:00] 夜点亮了灯
    
93. [00:36:00] 心却依旧朦胧
    
94. [00:39:00] 我已经努力的靠近
    
95. [00:43:00] 还是看你看不清
    
96. [00:47:00] 泪打湿眼睛
    
97. [00:50:00] 爱仍飘忽不定
    
98. [00:54:00] 我仿佛已触碰影踪
    
99. [00:57:00] 还是读你读不懂
    
100. [01:01:00] 我多想能够整日 酒醉梦不醒
     
101. [01:08:00] 让爱如海市蜃楼 变幻着风景
     
102. [01:16:00] 让融汇的魂灵 深深感动
     
103. [01:23:00] 不再回到现实一场空
     
104. [01:30:00] 我多想能够一生 酒醉梦不醒
     
105. [01:37:00] 让心如恒星暖在 彼此的怀中
     
106. [01:45:00] 让未来的旅程 有始也有终
     
107. [01:52:00] 走完人生中每一段路
     
108. [02:28:00] 夜点亮了灯
     
109. [02:32:00] 心却依旧朦胧
     
110. [02:36:00] 我已经努力的靠近
     
111. [02:39:00] 还是看你看不清
     
112. [02:43:00] 泪打湿眼睛
     
113. [02:46:00] 爱仍飘忽不定
     
114. [02:50:00] 我仿佛已触碰影踪
     
115. [02:54:00] 还是读你读不懂
     
116. [02:57:00] 我多想能够整日 酒醉梦不醒
     
117. [03:05:00] 让爱如海市蜃楼 变幻着风景
     
118. [03:12:00] 让融汇的魂灵 深深感动
     
119. [03:19:00] 不再回到现实一场空
     
120. [03:26:00] 我多想能够一生 酒醉梦不醒
     
121. [03:34:00] 让心如恒星暖在 彼此的怀中
     
122. [03:41:00] 让未来的旅程 有始也有终
     
123. [03:49:00] 走完人生中每一段路
     
124. [03:56:00] 走完人生中每一段路`;
     
125. var opts = {
     
126.         lrcTxt:lrc,
     
127.         lrcShowID:'sLRC',
     
128.         audioCtrl:'mDisk',
     
129.         audioURL:'http://music.lanyes.org/content/plugins/lymusic_tool/play.php?type=kw&id=83724323&.mp3'
     
130. };
     
131. new lrcPlayerX(opts);
     
132. </script>

复制代码

沧海笑

没有听到音乐声！

一师

沧海笑 发表于 2022-4-5 17:16
没有听到音乐声！

现在有音乐

沧海笑

欣赏了老师佳作！

许森匡.

你是全克隆呀！我能看到、能听到，显示完全正常！

夕阳黄昏

夕阳黄昏

一师 发表于 2022-4-5 17:15
这贴很奇怪的，电脑有图没音乐声，iPad正常显示的，不知何故？

可能是有些浏览器不支持自动播放，没播放就点一下那光盘，如果还不响就真是有问题了。

我这是正常的有图有声。

幸福快乐多彩

我能看到、能听到，显示完全正常！赞！