【经典】音画代码（与大家共享）

念风

我多年没取过源代码了，过去右键就会出现源文件，
复制下来，修改自己帖子的大小加上自己的音乐就可以
现在没试过，六七年没做图不知道为什么，
居然一点那个做图的欲望都没了
婴宁你说的很仔细，我们一起学习一下

不系之舟

婴宁 发表于 2023-8-24 16:46
这几天琢磨出一个获取音画帖子源代码的法子，和大家分享一下。获取源代码，是为了编辑，把其中的图片和音 ...

辛苦辛苦

不系之舟

婴宁 发表于 2023-8-24 16:46
这几天琢磨出一个获取音画帖子源代码的法子，和大家分享一下。获取源代码，是为了编辑，把其中的图片和音 ...

空了我去尝试这些套路

雨声

这么多代码，辛苦妞了

雨声

等空了一定好好学习一下。

阙歌

进来混个熟脸

婴宁

阙歌 发表于 2023-9-4 21:42
进来混个熟脸

阙歌好，知道我是谁吗？

婴宁

《笑问情缘》地址：http://qslt.net/forum.php?mod=viewthread&tid=4239，代码如下：

1. <div style="z-index: 127;width: 1234px; height: 700px; margin-top:50px; margin-left:-30px;  box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #8624A9 overflow: hidden;transform:  rotate(0deg);background:url('https://s1.ax1x.com/2023/08/20/pP8oEKs.jpg')0 0/100%  100%,linear-gradient(50deg, #4124A9, #ff0000, #000000, #00f000);text-align: center;">
   
2. <div class="HT">
   
3. <div  id="testImg" class="mm">
   
4. <img src="http://qslt.net/data/attachment/forum/202308/23/155501fl73xfpxl6gbxlol.gif" />
   
5. <img src="http://qslt.net/data/attachment/forum/202308/23/153735kfutbs33utqf43bf.gif" />
   
6. <img src="http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif" />
   
7. <img src="http://qslt.net/data/attachment/forum/202308/23/135840em114m944us654zk.gif" />
   
8. <img src="http://qslt.net/data/attachment/forum/202308/23/153755bnekx3e2lje22key.gif" />
   
9. <img src="http://qslt.net/data/attachment/forum/202308/23/153756a779k92acz393a9s.gif" />
   
10. <img src="http://qslt.net/data/attachment/forum/202308/23/155439e9i44y49z489gzm1.gif" />
    
11. 
    
12. <img src="http://qslt.net/data/attachment/forum/202308/23/160431x8mg0gcgi0kkbbfc.gif" />
    
13. <img src="http://qslt.net/data/attachment/forum/202308/23/161421oprhqp0a85k5a9p0.gif" />
    
14. 
    
15. <img src="http://qslt.net/data/attachment/forum/202308/23/200919q66jus7ff8zpkfmp.gif" />
    
16. <img src="http://qslt.net/data/attachment/forum/202308/23/214850g17fz14kqeri5zqr.gif" />
    
17. <img src="http://qslt.net/data/attachment/forum/202308/23/214850evzachza3fhxzetf.gif" />
    
18. <img src="http://qslt.net/data/attachment/forum/202308/24/153924yp4qudhrd2g6qv6p.gif" />
    
19. 
    
20. <img src="http://qslt.net/data/attachment/forum/202308/24/154118oxjzrfdvffxfaffa.gif" />
    
21. 
    
22. </div>
    
23. <audio autoplay=""  id="MusicPlayer"  src="https://music.163.com/song/media/outer/url?id=133875" loop="" ></audio>
    
24. 
    
25. <div class="img_border" ><img id="aplay" style="width: 100px; height: 100px;mask: radial-gradient(transparent 6px,#red 0);-webkit-mask: radial-gradient(transparent 6px,red 0);background: url()0 0/100% 100%,url('https://s1.ax1x.com/2023/08/19/pP3xdS0.jpg')-460px 60px/160% 100%; "></div>
    
26. 
    
27.       <div class="btn">
    
28.     <div   id="testImg" onclick="bf()"> <input type="button"  id="testBtn"value="暂停"style="width: 100px; height: 40px;border-radius: 0%;color: #000000;font-size:20px;font-weight:bold;border:1px solid #000000;"> </div>
    
29. </div>
    
30. 
    
31. <div class="lrc">
    
32. <ul id="ullrc">
    
33.          </ul>
    
34.       </div></div>
    
35. </div>
    
36. 
    
37. <style type="text/css">
    
38. 
    
39. .mm img{width:150px;
    
40.                 height: 250px;
    
41.                 position: absolute;
    
42.                 left:100px;
    
43.                 top:0px;z-index: 10;
    
44.                 box-shadow:  0px 0px 0px 2px #000000, 0px 0px 0px 8px #cccccc;
    
45. background-size:100% 100%;
    
46.                 border-radius: 0px;
    
47.             }
    
48.              .mm img:nth-child(1){
    
49.                 transform:  translateZ(450px);}
    
50.             .mm img:nth-child(2){
    
51.                 transform: rotateY(40deg) translateZ(450px);
    
52.             }
    
53.             .mm img:nth-child(3){
    
54.                 transform: rotateY(80deg) translateZ(450px);
    
55.             }
    
56.             .mm img:nth-child(4){
    
57.                 transform: rotateY(120deg) translatez(450px);
    
58.             }
    
59.             .mm img:nth-child(5){
    
60.                 transform: rotateY(160deg) translatez(450px);
    
61.             }
    
62.             .mm img:nth-child(6){
    
63.                 transform: rotateY(200deg) translatez(450px);
    
64.             }
    
65.             .mm img:nth-child(7){
    
66.                 transform: rotateY(240deg) translatez(450px);
    
67.             }
    
68.             .mm img:nth-child(8){
    
69.                 transform: rotateY(280deg)translatez(450px);
    
70.             }
    
71.             .mm img:nth-child(9){
    
72.                 transform: rotateY(320deg) translatez(450px);
    
73.             }
    
74. 
    
75. 
    
76. 
    
77.             .mm img:nth-child(1):stop{
    
78.                }
    
79.             .mm img:nth-child(2):stop{
    
80.                
    
81.             }
    
82.             .mm img:nth-child(3):stop{
    
83.                
    
84.             }
    
85.             .mm img:nth-child(4):stop{
    
86.                
    
87.             }
    
88.             .mm img:nth-child(5):stop{
    
89.                
    
90.             }
    
91.             .mm img:nth-child(6):stop{
    
92.             }
    
93.             .mm img:nth-child(7):stop{
    
94.                
    
95.             }
    
96.             .mm img:nth-child(8):stop{
    
97.                
    
98.             }
    
99.             .mm img:nth-child(9):stop{
    
100.                
     
101.             }
     
102.            .stop{
     
103.               animation-play-state:paused;
     
104.                }
     
105.             .mm{
     
106.                 margin: 160px auto;
     
107.                 width: 260px;
     
108.                 height: 180px;
     
109.                 transform-style: preserve-3d;
     
110.                 animation-name: animate;
     
111.                 animation-duration: 50s;
     
112.                 animation-iteration-count: infinite;
     
113.                 animation-timing-function: linear;
     
114. 
     
115.                 position: relative;
     
116.             }
     
117.             @keyframes animate  {
     
118.                 from {transform: rotatex(-20deg) rotateY(0deg);}
     
119. 50% {transform: rotatex(20deg) rotateY(-720deg);}
     
120.                 to {transform: rotatex(-20deg) rotateY(0deg);}
     
121.             }
     
122. 
     
123. 
     
124. </style>
     
125. <style type="text/css">.items  { animation: slider 0.26s linear infinite ; }
     
126. @keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
     
127. 50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
     
128. </style>
     
129. <script >
     
130. var image = document.getElementById("testImg"),
     
131.     button = document.getElementById("testBtn");
     
132.    
     
133. if (image.classList && image && button) {
     
134.     button.onclick = function() {
     
135.         if (this.value == '暂停') {
     
136.             image.classList.add('stop');
     
137.             this.value = '播放';
     
138.         } else {
     
139.             image.classList.remove('stop');
     
140.             this.value = '暂停';
     
141.         }
     
142.     };
     
143. }
     
144. </script>
     
145. 
     
146. 
     
147. <style type="text/css">
     
148. .HT{
     
149.     width: 1000px;position: absolute;top:0px; left:0px;
     
150. }
     
151. #MusicPlayer{
     
152.     width: 150px;
     
153.     display: block;
     
154.     margin: 0 auto;
     
155. }
     
156. .btn{
     
157.     display: block;z-index: 300;
     
158.     margin: 0px 0px;position: absolute;top:540px; left:20px;
     
159. }
     
160. .lrc{
     
161.     width: 870px;
     
162.     height: 140px;
     
163.     overflow: hidden;filter:drop-shadow(#FFFfff 1px 0 0)drop-shadow(#FFFfff 0 1px 0)drop-shadow(#FFFfff -1px 0 0) drop-shadow(#FFFfff 0 -1px  0);
     
164.     display: block;position: absolute;top:500px; left:60px;z-index: 30;
     
165.     margin: 0 auto;
     
166. }
     
167. .lrc #ullrc{
     
168.     width: 100%;
     
169.     padding: 0;
     
170.     list-style: none;
     
171.     transition: 0.3s all ease;
     
172.     margin: 0;
     
173. }
     
174. /*歌词普通样式*/
     
175. .lrc #ullrc li{
     
176.     height: 80px;
     
177.     line-height: 60px;
     
178. font-family:华文隶书;
     
179.     font-size: 0px;
     
180.     color: #000078;transform: translate(0%,0%);
     
181.     font-weight: normal;
     
182.     transition: .3s all ease;/*一定要加上不然看着突兀*/
     
183.     list-style-type: none;
     
184.     text-align: center;
     
185.     display: block;
     
186.     width: 100%;
     
187.     margin: 0 auto;-webkit-background-clip: text;
     
188.      -webkit-text-fill-color: transparent;
     
189.      background-color: red;
     
190.      background-image:linear-gradient(50deg, #fff000, #ff0000, #000000, #00f000);
     
191.      background-repeat:no-repeat;
     
192.      background-position: -800px 0;
     
193.      -webkit-animation:loop 3s linear infinite;
     
194. 
     
195. }
     
196. /*动态歌词样式*/
     
197. .lrc #ullrc li.active{
     
198.     font-size: 45px;
     
199.     color: #ff0000;transform: translate(0%,0%);
     
200.     font-weight: bold;
     
201. }
     
202. 
     
203. @-webkit-keyframes loop{
     
204.      0%{background-position: -800px 0;}
     
205.      100%{background-position: -0 0;}
     
206. }
     
207. 
     
208. /*mv动画*/
     
209. .img_border{display:inline-block;width:50px;height:50px;position: absolute;top:540px; left:810px;z-index: 14;}
     
210. .img_border #aplay{border:2px solid #cccccc;border-radius:50%; transition: .3s all ease;/*一定要加上不然看着突兀*/ }
     
211. .z360z{animation:rotating 8s linear infinite;
     
212. }@keyframes rotating  {
     
213. from {transform: rotate(0deg);}
     
214. to {transform: rotate(360deg);}
     
215. }
     
216. 
     
217. </style>
     
218. 
     
219. <script>var lrc =`;
     
220. function $(id) {return document.getElementById(id);
     
221. }//这样写以后getid方便
     
222. function getLrcArray() {
     
223.     var parts = lrc.split("\n");
     
224.     for (let index = 0; index < parts.length; index++) {
     
225.         parts[index] = getLrcObj(parts[index]);
     
226.     }
     
227.     return parts;
     
228. 
     
229.     function getLrcObj(content) {
     
230.         var twoParts = content.split("]");
     
231.         var time = twoParts[0].substr(1);
     
232.         var timeParts = time.split(":");
     
233.         var seconds = +timeParts[1];
     
234.         var min = +timeParts[0];
     
235.         seconds = min * 60 + seconds;
     
236.         var words = twoParts[1];
     
237.         return{
     
238.             seconds: seconds,
     
239.             words: words,
     
240.         };
     
241.     }
     
242. }
     
243. 
     
244. var lrcArray = getLrcArray();
     
245. 
     
246. function inputLrc() {
     
247.     for (let index = 0; index < lrcArray.length; index++) {
     
248.         var li = document.createElement("li");
     
249.         li.innerText = lrcArray[index].words;
     
250.         $("ullrc").appendChild(li);
     
251.     }
     
252. }
     
253. 
     
254. inputLrc();
     
255. 
     
256. function setPosition() {
     
257.     var index = getLrcIndex();
     
258.     if (index == -1) {
     
259.         return;
     
260.     }
     
261.     var lrc_li_height = 80, lrc_ul_height = 70;
     
262.     var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
     
263.     if (top < 0) {
     
264.         top = 0;
     
265.     }
     
266.     $("ullrc").style.marginTop = -top + "px";
     
267.     var activeLi = $("ullrc").querySelector(".active");
     
268.     if(activeLi){
     
269.         activeLi.classList.remove("active");
     
270.     }
     
271.     $("ullrc").children[index].classList.add("active");
     
272. }
     
273. 
     
274. var turn = 0;
     
275. 
     
276. function getLrcIndex(){
     
277.     var time = $("MusicPlayer").currentTime + turn;
     
278.     for (var index = 0; index < lrcArray.length; index++) {
     
279.         if (lrcArray[index].seconds > time) {
     
280.             return index - 1;
     
281.         }
     
282.     }
     
283. }
     
284. 
     
285. $("MusicPlayer").ontimeupdate = setPosition;
     
286. </script>
     
287. <script>
     
288.          function bf() {
     
289.             var audio = document.getElementById('MusicPlayer');
     
290.             var bf=document.getElementById("bf");
     
291.             if (audio !== null) {
     
292.                 if (audio.paused) {
     
293.                     audio.play(); //audio.play();
     
294.                     bf.innerText="";
     
295.                 } else {
     
296.                     audio.pause();
     
297.                     bf.innerText="";
     
298.                 }
     
299.             }
     
300.         }
     
301. var image = document.getElementById("testImg"),
     
302.     button = document.getElementById("testBtn");
     
303.    
     
304. if (image.classList && image && button) {
     
305.     button.onclick = function() {
     
306.         if (this.value == '暂停') {
     
307.             image.classList.add('stop');
     
308.             this.value = '播放';
     
309.         } else {
     
310.             image.classList.remove('stop');
     
311.             this.value = '暂停';
     
312.         }
     
313.     };
     
314. }
     
315. var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
     
316. 
     
317. {document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
     
318. </script>
     

复制代码

《三生三世》地址：http://qslt.net/forum.php?mod=viewthread&tid=4240 ，代码如下：

1. <br>
   
2. 
   
3. <style type="text/css">
   
4. .lyricDisp{-webkit-text-stroke:1px #ffffff;font: bold 2em  悟空大字库, sans-serif; transition:.3s all ease;font-size:2.2em;}
   
5. .lyricDisp:nth-child(1){color:#000080;text-align:left;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}
   
6. .lyricDisp:nth-child(1)::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color: transparent;background: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#FEFFFF 62%,#36F4B1 75%);-webkit-background-clip: text;-webkit-text-stroke:2px #000000;filter: contrast(110%)brightness(160%);overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
   
7. .lyricDisp:nth-child(2){color: transparent;background: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#FEFFFF 62%,#36F4B1 75%);-webkit-background-clip: text;-webkit-text-stroke:2px #000000;text-align:center;font-size:2.2em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
   
8. #LRCShow{position:absolute;left:15%;bottom:10px;width:100%;height:100px;margin:16px auto position:relative;z-index: 11}#rdisk{position:absolute;left:20px;bottom:10px;border-radius: 50%;font-size:4em;color:red;animation:circleSmall2 10s linear infinite;animation-play-state:paused;cursor:pointer;z-index: 11}@keyframes circleSmall2{0%{transform:rotateX(40deg) rotateY(20deg) rotateZ(0deg);}100%{transform:rotateX(40deg) rotateY(20deg) rotate(360deg);}}
   
9.        
   
10. 
    
11. #hWindow {
    
12.         width:1200px;
    
13.                 height:620px;
    
14.                
    
15.                 bbbackground-size:cover;
    
16.                
    
17.                
    
18.                 position: relative;
    
19.                 margin:0px  0px;
    
20.                 overflow:hidden;
    
21.                 z-index: 9;
    
22.         }
    
23. 
    
24. #mpic { position: absolute;
    
25.         top: 0px;
    
26.         left: 0px;
    
27.         width: 1200px;z-index: 10;
    
28.         height: 620px;
    
29.         animation: fly 100s linear infinite;
    
30.         cursor: pointer;
    
31.         opacity: 0;
    
32. }
    
33. #mpicc { position: absolute;
    
34.         top: 0px;
    
35.         left: 0px;
    
36.         width: 1200px;z-index: 10;
    
37.         height: 620px;
    
38.         animation: tot 80s linear infinite;
    
39.         cursor: pointer;
    
40.         opacity: 0;
    
41. }
    
42. 
    
43. #hWindow:hover #mpic { position: absolute;
    
44.         top: 0px;
    
45.         left: 0px;
    
46.         width: 1200px;z-index: 10;
    
47.         height: 620px;
    
48.         animation: fly 100s linear infinite;
    
49.         cursor: pointer;
    
50.         opacity: 1; transition: 0.3s;
    
51. }
    
52. #hWindow:hover #mpicc { position: absolute;
    
53.         top: 0px;
    
54.         left: 0px;
    
55.         width: 1200px;z-index: 10;
    
56.         height: 620px;
    
57.         animation: tot 80s linear infinite;
    
58.         cursor: pointer;
    
59.         opacity: 1; transition: 0.3s;
    
60. }
    
61. 
    
62. @keyframes fly {0%{
    
63.         background-position: 600% 0;
    
64.     }
    
65.     100%{
    
66.         background-position: 30% 1600%;filter:hue-rotate(360deg)
    
67.     }
    
68. }
    
69. @keyframes tot { 0%{
    
70.         background-position: 0% -1600%;
    
71.     }
    
72.     100%{
    
73.         background-position: 0% 0%;filter:hue-rotate(360deg)
    
74.     }
    
75. }
    
76. 
    
77. .book {
    
78.   position: relative;
    
79.   perspective: 730px;
    
80.   perspective-origin: center 50px; top: -80px;
    
81.   transform: scale(1.5,1.7);
    
82.   filter: drop-shadow(0px 5px 5px #cccccc);
    
83. }
    
84. 
    
85. .page {
    
86.   width: 210px;
    
87.   height: 300px;
    
88.   background-color: #cccccc;
    
89.   position: absolute;
    
90.   top: 0px;
    
91.   right: 50%;
    
92.   transform-origin: 100% 100%;
    
93.   border: solid #555555 0.4px;
    
94.   background-size: 420px 300px;
    
95.   background-position: center;
    
96.   transform-style: preserve-3d;
    
97. }
    
98. .page:nth-child(1) {
    
99.   transform: rotateX(60deg) rotateY(3deg);
    
100. }
     
101. .page:nth-child(2) {
     
102.   transform: rotateX(60deg) rotateY(4.5deg);
     
103. }
     
104. .page:nth-child(3) {
     
105.   transform: rotateX(60deg) rotateY(6deg);
     
106.   
     
107.           animation: nextPage 25s infinite -24s steps(1);
     
108.   background-size: 420px 300px;
     
109.   background-position: -2px -2px;
     
110. }
     
111. .page:nth-child(4) {
     
112.   transform: rotateX(60deg) rotateY(177deg);
     
113. }
     
114. .page:nth-child(5) {
     
115.   transform: rotateX(60deg) rotateY(175.5deg);
     
116. }
     
117. .page:nth-child(6) {
     
118.   transform: rotateX(60deg) rotateY(174deg);
     
119.   overflow: hidden;
     
120. }
     
121. .page:nth-child(6)::after {
     
122.   content: "";
     
123.   width: 210px;
     
124.   height: 300px;
     
125.   position: absolute;
     
126.   top: 0px;
     
127.   right: 0%;
     
128.   transform-origin: center;
     
129.   transform: rotateY(180deg);
     
130.    animation: nextPage 25s -20s infinite steps(1);
     
131.   background-size: 420px 300px;
     
132.   background-position: 100% -2px;
     
133. }
     
134. 
     
135. @keyframes nextPage {
     
136.   0% {
     
137.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
     
138.   }
     
139.   20% {
     
140.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
     
141.   }
     
142.   40% {
     
143.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
     
144.   }
     
145.   60% {
     
146.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
     
147.   }
     
148.   80% {
     
149.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
     
150.   }
     
151. }
     
152. 
     
153. .gap {
     
154.   width: 10px;
     
155.   height: 300px;
     
156.   background: none;
     
157.   transform: rotateX(60deg);
     
158.   transform-origin: bottom;
     
159.   position: absolute;
     
160.   top: 0px;
     
161.   left: calc(50% - 5px);
     
162. }
     
163. .gap::after {
     
164.   content: "";
     
165.   position: absolute;
     
166.   bottom: 0;
     
167.   left: 50%;
     
168.   transform: translate(-50%, 50%);
     
169.   background-color: #555555;
     
170.   width: 10px;
     
171.   height: 5px;
     
172.   border-radius: 50%;
     
173. }
     
174. 
     
175. .pages, .flips {
     
176.   transform-style: preserve-3d;
     
177. }
     
178. 
     
179. .flip {
     
180.   width: 32px;
     
181.   height: 300px;
     
182.   position: absolute;
     
183.   top: 0px;
     
184.   transform-origin: 100% 100%;
     
185.   right: 100%;
     
186.   border: solid #555555;
     
187.   border-width: 2px 0px;
     
188.   perspective: 8200px;
     
189.   perspective-origin: center;
     
190.   transform-style: preserve-3d;
     
191.   background-size: 420px 300px;
     
192. }
     
193. .flip::after {
     
194.   content: "";
     
195.   position: absolute;
     
196.   top: 0px;
     
197.   right: 0%;
     
198.   width: 100%;
     
199.   height: 100%;
     
200.   transform-origin: center;
     
201.   background-size: 420px 300px;
     
202. }
     
203. .flip.flip1 {
     
204.   right: 50%;
     
205.   -webkit-animation: flip1 5s infinite ease-in-out;
     
206.           animation: flip1 5s infinite ease-in-out;
     
207.   border-width: 1px 1px 1px 0;
     
208. }
     
209. .flip.flip1::after {
     
210.   -webkit-animation: nextFlip1 25s -20s infinite steps(1);
     
211.           animation: nextFlip1 25s -20s infinite steps(1);
     
212. }
     
213. .flip:not(.flip1) {
     
214.   right: calc(100% - 2px);
     
215.   top: -2px;
     
216.   transform-origin: right;
     
217.   -webkit-animation: flip2 5s ease-in-out infinite;
     
218.           animation: flip2 5s ease-in-out infinite;
     
219. }
     
220. .flip.flip2::after {
     
221.   -webkit-animation: nextFlip2 25s -20s infinite steps(1);
     
222.           animation: nextFlip2 25s -20s infinite steps(1);
     
223. }
     
224. .flip.flip3::after {
     
225.   -webkit-animation: nextFlip3 25s -20s infinite steps(1);
     
226.           animation: nextFlip3 25s -20s infinite steps(1);
     
227. }
     
228. .flip.flip4::after {
     
229.   -webkit-animation: nextFlip4 25s -20s infinite steps(1);
     
230.           animation: nextFlip4 25s -20s infinite steps(1);
     
231. }
     
232. .flip.flip5::after {
     
233.   -webkit-animation: nextFlip5 25s -20s infinite steps(1);
     
234.           animation: nextFlip5 25s -20s infinite steps(1);
     
235. }
     
236. .flip.flip6::after {
     
237.   -webkit-animation: nextFlip6 25s -20s infinite steps(1);
     
238.           animation: nextFlip6 25s -20s infinite steps(1);
     
239. }
     
240. .flip.flip7::after {
     
241.   -webkit-animation: nextFlip7 25s -20s infinite steps(1);
     
242.           animation: nextFlip7 25s -20s infinite steps(1);
     
243. }
     
244. .flip.flip7 {
     
245.   width: 30px;
     
246.   border-width: 1px 0px 1px 1px;
     
247. }
     
248. .flip.flip7::after {
     
249.   -webkit-animation: nextFlip7 25s -20s infinite steps(1);
     
250.           animation: nextFlip7 25s -20s infinite steps(1);
     
251. }
     
252. 
     
253. @keyframes flip1 {
     
254.   0%, 20% {
     
255.     transform: rotateX(60deg) rotateY(6deg);
     
256.   }
     
257.   80%, 100% {
     
258.     transform: rotateX(60deg) rotateY(174deg);
     
259.   }
     
260. }
     
261. 
     
262. @keyframes flip2 {
     
263.   0%, 20% {
     
264.     transform: rotateY(0deg) translateY(0px);
     
265.   }
     
266.   50% {
     
267.     transform: rotateY(-15deg) translateY(0px);
     
268.   }
     
269. }
     
270. 
     
271. 
     
272. @keyframes nextFlip1 {
     
273.   0% {
     
274.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
     
275.     background-position: -178px -2px;
     
276.     transform: rotateY(0deg);
     
277.   }
     
278.   10% {
     
279.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
     
280.     background-position: -210px -2px;
     
281.     transform: rotateY(180deg);
     
282.   }
     
283.   20% {
     
284.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
     
285.     background-position: -178px -2px;
     
286.     transform: rotateY(0deg);
     
287.   }
     
288.   30% {
     
289.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
     
290.     background-position: -210px -2px;
     
291.     transform: rotateY(180deg);
     
292.   }
     
293.   40% {
     
294.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
     
295.     background-position: -178px -2px;
     
296.     transform: rotateY(0deg);
     
297.   }
     
298.   50% {
     
299.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
     
300.     background-position: -210px -2px;
     
301.     transform: rotateY(180deg);
     
302.   }
     
303.   60% {
     
304.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
     
305.     background-position: -178px -2px;
     
306.     transform: rotateY(0deg);
     
307.   }
     
308.   70% {
     
309.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
     
310.     background-position: -210px -2px;
     
311.     transform: rotateY(180deg);
     
312.   }
     
313.   80% {
     
314.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
     
315.     background-position: -178px -2px;
     
316.     transform: rotateY(0deg);
     
317.   }
     
318.   90% {
     
319.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
     
320.     background-position: -210px -2px;
     
321.     transform: rotateY(180deg);
     
322.   }
     
323. }
     
324. 
     
325. @keyframes nextFlip2 {
     
326.   0% {
     
327.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
     
328.     background-position: -148px -2px;
     
329.     transform: rotateY(0deg);
     
330.   }
     
331.   10.5% {
     
332.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
     
333.     background-position: -238px -2px;
     
334.     transform: rotateY(180deg);
     
335.   }
     
336.   20% {
     
337.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
     
338.     background-position: -148px -2px;
     
339.     transform: rotateY(0deg);
     
340.   }
     
341.   30.5% {
     
342.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
     
343.     background-position: -238px -2px;
     
344.     transform: rotateY(180deg);
     
345.   }
     
346.   40% {
     
347.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
     
348.     background-position: -148px -2px;
     
349.     transform: rotateY(0deg);
     
350.   }
     
351.   50.5% {
     
352.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
     
353.     background-position: -238px -2px;
     
354.     transform: rotateY(180deg);
     
355.   }
     
356.   60% {
     
357.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
     
358.     background-position: -148px -2px;
     
359.     transform: rotateY(0deg);
     
360.   }
     
361.   70.5% {
     
362.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
     
363.     background-position: -238px -2px;
     
364.     transform: rotateY(180deg);
     
365.   }
     
366.   80% {
     
367.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
     
368.     background-position: -148px -2px;
     
369.     transform: rotateY(0deg);
     
370.   }
     
371.   90.5% {
     
372.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
     
373.     background-position: -238px -2px;
     
374.     transform: rotateY(180deg);
     
375.   }
     
376. }
     
377. 
     
378. @keyframes nextFlip3 {
     
379.   0% {
     
380.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
     
381.     background-position: -118px -2px;
     
382.     transform: rotateY(0deg);
     
383.   }
     
384.   11% {
     
385.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
     
386.     background-position: -268px -2px;
     
387.     transform: rotateY(180deg);
     
388.   }
     
389.   20% {
     
390.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
     
391.     background-position: -118px -2px;
     
392.     transform: rotateY(0deg);
     
393.   }
     
394.   31% {
     
395.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
     
396.     background-position: -268px -2px;
     
397.     transform: rotateY(180deg);
     
398.   }
     
399.   40% {
     
400.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
     
401.     background-position: -118px -2px;
     
402.     transform: rotateY(0deg);
     
403.   }
     
404.   51% {
     
405.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
     
406.     background-position: -268px -2px;
     
407.     transform: rotateY(180deg);
     
408.   }
     
409.   60% {
     
410.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
     
411.     background-position: -118px -2px;
     
412.     transform: rotateY(0deg);
     
413.   }
     
414.   71% {
     
415.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
     
416.     background-position: -268px -2px;
     
417.     transform: rotateY(180deg);
     
418.   }
     
419.   80% {
     
420.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
     
421.     background-position: -118px -2px;
     
422.     transform: rotateY(0deg);
     
423.   }
     
424.   91% {
     
425.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
     
426.     background-position: -268px -2px;
     
427.     transform: rotateY(180deg);
     
428.   }
     
429. }
     
430. 
     
431. @keyframes nextFlip4 {
     
432.   0% {
     
433.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
     
434.     background-position: -88px -2px;
     
435.     transform: rotateY(0deg);
     
436.   }
     
437.   11.5% {
     
438.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
     
439.     background-position: -298px -2px;
     
440.     transform: rotateY(180deg);
     
441.   }
     
442.   20% {
     
443.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
     
444.     background-position: -88px -2px;
     
445.     transform: rotateY(0deg);
     
446.   }
     
447.   31.5% {
     
448.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
     
449.     background-position: -298px -2px;
     
450.     transform: rotateY(180deg);
     
451.   }
     
452.   40% {
     
453.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
     
454.     background-position: -88px -2px;
     
455.     transform: rotateY(0deg);
     
456.   }
     
457.   51.5% {
     
458.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
     
459.     background-position: -298px -2px;
     
460.     transform: rotateY(180deg);
     
461.   }
     
462.   60% {
     
463.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
     
464.     background-position: -88px -2px;
     
465.     transform: rotateY(0deg);
     
466.   }
     
467.   71.5% {
     
468.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
     
469.     background-position: -298px -2px;
     
470.     transform: rotateY(180deg);
     
471.   }
     
472.   80% {
     
473.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
     
474.     background-position: -88px -2px;
     
475.     transform: rotateY(0deg);
     
476.   }
     
477.   91.5% {
     
478.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
     
479.     background-position: -298px -2px;
     
480.     transform: rotateY(180deg);
     
481.   }
     
482. }
     
483. 
     
484. @keyframes nextFlip5 {
     
485.   0% {
     
486.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
     
487.     background-position: -58px -2px;
     
488.     transform: rotateY(0deg);
     
489.   }
     
490.   12% {
     
491.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
     
492.     background-position: -328px -2px;
     
493.     transform: rotateY(180deg);
     
494.   }
     
495.   20% {
     
496.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
     
497.     background-position: -58px -2px;
     
498.     transform: rotateY(0deg);
     
499.   }
     
500.   32% {
     
501.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
     
502.     background-position: -328px -2px;
     
503.     transform: rotateY(180deg);
     
504.   }
     
505.   40% {
     
506.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
     
507.     background-position: -58px -2px;
     
508.     transform: rotateY(0deg);
     
509.   }
     
510.   52% {
     
511.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
     
512.     background-position: -328px -2px;
     
513.     transform: rotateY(180deg);
     
514.   }
     
515.   60% {
     
516.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
     
517.     background-position: -58px -2px;
     
518.     transform: rotateY(0deg);
     
519.   }
     
520.   72% {
     
521.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
     
522.     background-position: -328px -2px;
     
523.     transform: rotateY(180deg);
     
524.   }
     
525.   80% {
     
526.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
     
527.     background-position: -58px -2px;
     
528.     transform: rotateY(0deg);
     
529.   }
     
530.   92% {
     
531.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
     
532.     background-position: -328px -2px;
     
533.     transform: rotateY(180deg);
     
534.   }
     
535. }
     
536. 
     
537. @keyframes nextFlip6 {
     
538.   0% {
     
539.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
     
540.     background-position: -28px -2px;
     
541.     transform: rotateY(0deg);
     
542.   }
     
543.   12.5% {
     
544.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
     
545.     background-position: -358px -2px;
     
546.     transform: rotateY(180deg);
     
547.   }
     
548.   20% {
     
549.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
     
550.     background-position: -28px -2px;
     
551.     transform: rotateY(0deg);
     
552.   }
     
553.   32.5% {
     
554.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
     
555.     background-position: -358px -2px;
     
556.     transform: rotateY(180deg);
     
557.   }
     
558.   40% {
     
559.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
     
560.     background-position: -28px -2px;
     
561.     transform: rotateY(0deg);
     
562.   }
     
563.   52.5% {
     
564.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
     
565.     background-position: -358px -2px;
     
566.     transform: rotateY(180deg);
     
567.   }
     
568.   60% {
     
569.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
     
570.     background-position: -28px -2px;
     
571.     transform: rotateY(0deg);
     
572.   }
     
573.   72.5% {
     
574.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
     
575.     background-position: -358px -2px;
     
576.     transform: rotateY(180deg);
     
577.   }
     
578.   80% {
     
579.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
     
580.     background-position: -28px -2px;
     
581.     transform: rotateY(0deg);
     
582.   }
     
583.   92.5% {
     
584.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
     
585.     background-position: -358px -2px;
     
586.     transform: rotateY(180deg);
     
587.   }
     
588. }
     
589. 
     
590. @keyframes nextFlip7 {
     
591.   0% {
     
592.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
     
593.     background-position: -2px -2px;
     
594.     transform: rotateY(0deg);
     
595.   }
     
596.   13% {
     
597.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
     
598.     background-position: -388px -2px;
     
599.     transform: rotateY(180deg);
     
600.   }
     
601.   20% {
     
602.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/153709juz9couobuibc9ub.gif");
     
603.     background-position: -2px -2px;
     
604.     transform: rotateY(0deg);
     
605.   }
     
606.   33% {
     
607.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
     
608.     background-position: -388px -2px;
     
609.     transform: rotateY(180deg);
     
610.   }
     
611.   40% {
     
612.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/203859rly83rrrycqddyrj.gif");
     
613.     background-position: -2px -2px;
     
614.     transform: rotateY(0deg);
     
615.   }
     
616.   53% {
     
617.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
     
618.     background-position: -388px -2px;
     
619.     transform: rotateY(180deg);
     
620.   }
     
621.   60% {
     
622.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/161422nr3rxptjedpe9ze3.gif");
     
623.     background-position: -2px -2px;
     
624.     transform: rotateY(0deg);
     
625.   }
     
626.   73% {
     
627.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
     
628.     background-position: -388px -2px;
     
629.     transform: rotateY(180deg);
     
630.   }
     
631.   80% {
     
632.     background-image: url("http://qslt.net/data/attachment/forum/202308/24/204124y55y6puvzfcf3a5p.gif");
     
633.     background-position: -2px -2px;
     
634.     transform: rotateY(0deg);
     
635.   }
     
636.   93% {
     
637.     background-image: url("http://qslt.net/data/attachment/forum/202308/23/135936comwvy6vpucp2b6h.gif");
     
638.     background-position: -388px -2px;
     
639.     transform: rotateY(180deg);
     
640.   }
     
641. }
     
642. 
     
643. 
     
644. </style>
     
645. 
     
646. <div style="z-index: 127;width: 1200px; height: 620px; margin-top:50px; margin-left:30px;  box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #FAF6F6; overflow: hidden;transform:  rotate(0deg);background:url('https://s1.ax1x.com/2023/08/25/pPtBJ10.jpg')0 0/100%  100%; text-align: center;">
     
647. 
     
648. <div id="hWindow">
     
649. <div class="gap">&nbsp;</div>
     
650. 
     
651. <div class="book">
     
652. <div class="pages">
     
653. <div class="page">&nbsp;</div>
     
654. 
     
655. <div class="page">&nbsp;</div>
     
656. 
     
657. <div class="page">&nbsp;</div>
     
658. 
     
659. <div class="page">&nbsp;</div>
     
660. 
     
661. <div class="page">&nbsp;</div>
     
662. 
     
663. <div class="page">&nbsp;</div>
     
664. </div>
     
665. 
     
666. <div class="flips">
     
667. <div class="flip flip1">
     
668. <div class="flip flip2">
     
669. <div class="flip flip3">
     
670. <div class="flip flip4">
     
671. <div class="flip flip5">
     
672. <div class="flip flip6">
     
673. <div class="flip flip7">&nbsp;</div>
     
674. </div>
     
675. </div>
     
676. </div>
     
677. </div>
     
678. </div>
     
679. </div>
     
680. </div>
     
681. </div>
     
682.         <div id="curp"></div>
     
683. 
     
684.        <img id="mpic" style="width: 100%; height: 100%;background: url('https://www.kumeiwp.com/sub/filestores/2022/11/09/9d71b312b9587c941a35e338e496ae53.png')0 0/50% 50%">
     
685. <img id="mpicc" style="width: 100%; height: 100%;background: url('https://www.kumeiwp.com/sub/filestores/2022/11/09/9d71b312b9587c941a35e338e496ae53.png')0 0/40% 40%">
     
686.     <div id="rdisk" style="width:80px;height:80px;border: 2px solid #000000;
     
687.         background: url('https://365.tf/disk/tf/1667321249.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);mask: radial-gradient(transparent 7px,#red 0);transform: rotateX(45deg) rotateY(20deg) rotate(0deg);left:93%;top: 475px;"></div>
     
688.     <div id="LRCShow" style="position:absolute;left:15%;bottom:10px;">
     
689.               <div class="lyricDisp"></div><div class="lyricDisp">
     
690. </div>
     
691.         </div>
     
692. 
     
693. </div>
     
694. 
     
695. </div>
     
696. 
     
697. <textarea id="lrc_content" style="visibility: hidden;">                       
     
698. </textarea>
     
699. 
     
700. 
     
701. 
     
702. 
     
703. 
     

复制代码

婴宁

《江湖再见》地址：http://qslt.net/forum.php?mod=viewthread&tid=4989，代码如下：

1. <div style="z-index: 127;width: 1200px; height: 630px; margin-top:50px; margin-left:-30px;  box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; overflow: hidden;transform:  rotate(0deg);;background:url('https://s1.ax1x.com/2023/08/25/pPtBJ10.jpg')0 0/100%  100%,linear-gradient(50deg, #4124A9, #ff0000, #000000, #00f000);text-align: center;">
   
2. 
   
3. 
   
4. <div   id="testImg" class="mm">
   
5. <img src="http://qslt.net/data/attachment/forum/202308/24/203611sd0vzwhiyv0tvyim.gif" />
   
6. <img src="http://qslt.net/data/attachment/forum/202308/23/141739g7enwy3u0m0ciwsn.gif" />
   
7. <img src="http://qslt.net/data/attachment/forum/202308/23/141739qbnwybjqdoxy4ixn.gif" />
   
8. <img src="http://qslt.net/data/attachment/forum/202308/23/141759y5kk0ck30z2a00ka.gif" />
   
9. <img src="http://qslt.net/data/attachment/forum/202308/25/202443sxfi46dipziiz2rj.gif" />
   
10. <img src="http://qslt.net/data/attachment/forum/202308/25/202539c3dk4dz733b7u2st.gif" />
    
11. <img src="http://qslt.net/data/attachment/forum/202308/23/153823pj43g4qj83rz1tr7.gif" />
    
12. <img src="http://qslt.net/data/attachment/forum/202308/23/162007deywf9ft94x0h09r.gif" />
    
13. <img src="http://qslt.net/data/attachment/forum/202308/25/130225s3b97c93zbdyc6uc.gif" />
    
14. <img src="http://qslt.net/data/attachment/forum/202308/23/214818qzqefvugqrkgcurr.gif" />
    
15. 
    
16. <img src="http://qslt.net/data/attachment/forum/202308/23/214818fvklkev579h98e8q.gif" />
    
17. 
    
18. <img src="http://qslt.net/data/attachment/forum/202308/25/132052eikdl55hph6wkh4d.gif" />
    
19. <img src="http://qslt.net/data/attachment/forum/202308/27/122037hdss656lopil4slp.gif" />
    
20. 
    
21. 
    
22. <img src="http://qslt.net/data/attachment/forum/202308/24/153924omu50ugavykazzwo.gif" />
    
23. <img src="http://qslt.net/data/attachment/forum/202308/27/161208agxxyfcw95cxfw97.gif" />
    
24. <img src="http://qslt.net/data/attachment/forum/202308/24/153950h2bqc5qeg255og55.gif" />
    
25. <img src="http://qslt.net/data/attachment/forum/202308/24/154117f121h9h7qeqafly8.gif" />
    
26. 
    
27. <img src="http://qslt.net/data/attachment/forum/202308/24/154148t8gq2n82n9gefj8u.gif" />
    
28. 
    
29. </div>
    
30. </div>
    
31. <audio autoplay=""  id="MusicPlayer"  src="https://music.163.com/song/media/outer/url?id=33789684" loop="" ></audio>
    
32. 
    
33. <div class="img_border" ><img id="aplay" style="width: 100px; height: 100px;mask: radial-gradient(transparent 6px,#red 0);-webkit-mask: radial-gradient(transparent 6px,red 0);background: url()0 0/100% 100%,url('https://s1.ax1x.com/2023/08/19/pP3xdS0.jpg')-460px 60px/160% 100%; "></div>
    
34. 
    
35.       <div class="btn">
    
36.    <div   id="testImg" onclick="bf()"> <input type="button"  id="testBtn"value="暂停"style="width: 100px; height: 40px;border-radius: 0%;color: #000000;font-size:20px;font-weight:bold;border:1px solid #000000;"> </div>
    
37. </div>
    
38. 
    
39. <div class="lrc">
    
40. <ul id="ullrc">
    
41.          </ul>
    
42.       </div></div>
    
43. </div>
    
44. 
    
45. <style type="text/css">
    
46. 
    
47. .mm img{width:140px;
    
48.                 height: 274px;
    
49.                 position: absolute;
    
50.                 left:0px;
    
51.                     top:0px;z-index: 20;
    
52.                 box-shadow:  0px 0px 0px 2px #000000, 0px 0px 0px 6px #88aaaa;
    
53. filter:contrast(130%)brightness(100%);
    
54.                 border-radius: 0px;
    
55.             }
    
56.              .mm img:nth-child(1){
    
57.                 transform:  rotateX(0deg) translateZ(262px);}
    
58.             .mm img:nth-child(2){
    
59.                 transform:  rotateX(45deg) translateZ(262px);}
    
60.             .mm img:nth-child(3){
    
61.                 transform: rotateX(90deg) translatez(262px);}
    
62.             .mm img:nth-child(4){
    
63.                transform: rotateX(135deg) translatez(262px);
    
64.             }
    
65.             .mm img:nth-child(5){
    
66.                  transform: rotateX(180deg) translatez(262px);
    
67.             }
    
68.             .mm img:nth-child(6){
    
69.                transform: rotateX(225deg) translatez(262px);
    
70.             }
    
71.             .mm img:nth-child(7){
    
72.                 transform: rotateX(270deg) translatez(262px);
    
73.             }
    
74.             .mm img:nth-child(8){
    
75.                 transform: rotateX(315deg) translatez(262px);
    
76.             }
    
77.             
    
78. .mm img:nth-child(9){
    
79.                 transform: rotateX(355deg) translatez(262px);
    
80.             }
    
81. .mm img:nth-child(8){
    
82.                 transform: rotateX(395deg) translatez(262px);
    
83.             }
    
84. .mm img:nth-child(8){
    
85.                 transform: rotateX(430deg) translatez(262px);
    
86.             }
    
87.            .mm img:nth-child(1):stop{
    
88.                }
    
89.             .mm img:nth-child(2):stop{
    
90.                
    
91.             }
    
92.             .mm img:nth-child(3):stop{
    
93.                
    
94.             }
    
95.             .mm img:nth-child(4):stop{
    
96.                
    
97.             }
    
98.             .mm img:nth-child(5):stop{
    
99.                
    
100.             }
     
101.             .mm img:nth-child(6):stop{
     
102.             }
     
103.             .mm img:nth-child(7):stop{
     
104.                
     
105.             }
     
106.             .mm img:nth-child(8):stop{
     
107.                
     
108.             }
     
109.              .mm img:nth-child(9):stop{
     
110.                
     
111.             }
     
112.            
     
113.             .mm img:nth-child(10):stop{
     
114.                
     
115.             }
     
116. 
     
117. 
     
118.              .mm img:nth-child(11):stop{
     
119.                
     
120.             }
     
121. 
     
122. 
     
123.              .mm img:nth-child(12):stop{
     
124.                
     
125.             }
     
126.            .stop{
     
127.               animation-play-state:paused;
     
128.                }
     
129.             .mm{
     
130.                 margin: 200px auto;
     
131.                 width: 340px;
     
132.                 height: 184px;
     
133.                 transform-style: preserve-3d;
     
134.                 animation-name: animate;
     
135.                 animation-duration: 50s;
     
136.                 animation-iteration-count: infinite;
     
137.                 animation-timing-function: linear;
     
138. 
     
139.                 position: relative;
     
140.             }
     
141.             @keyframes animate  {
     
142.                 0% {
     
143.                     transform:rotateX(-10deg) rotateZ(65deg) rotateX(-360deg);
     
144.                 }
     
145.                 25% {
     
146.                     transform:rotateX(10deg) rotateZ(-65deg) rotateX(0deg);
     
147.                 }
     
148. 50% {
     
149.                     transform:rotateX(10deg) rotateZ(65deg) rotateX(360deg);
     
150.                 }
     
151. 75% {
     
152.                     transform:rotateX(-10deg) rotateZ(65deg) rotateX(0deg);
     
153.                 }
     
154. 100% {
     
155.                     transform:rotateX(-10deg) rotateZ(65deg) rotateX(-360deg);
     
156.                 }
     
157. 
     
158.             }
     
159. </style>
     
160. 
     
161. 
     
162. <script >
     
163. var image = document.getElementById("testImg"),
     
164.     button = document.getElementById("testBtn");
     
165.    
     
166. if (image.classList && image && button) {
     
167.     button.onclick = function() {
     
168.         if (this.value == '暂停') {
     
169.             image.classList.add('stop');
     
170.             this.value = '播放';
     
171.         } else {
     
172.             image.classList.remove('stop');
     
173.             this.value = '暂停';
     
174.         }
     
175.     };
     
176. }
     
177. </script>
     
178. 
     
179. 
     
180. <style type="text/css">
     
181. .HT{
     
182.     width: 1000px;position: absolute;top:0px; left:0px;
     
183. }
     
184. #MusicPlayer{
     
185.     width: 250px;
     
186.     display: block;
     
187.     margin: 0 auto;
     
188. }
     
189. .btn{
     
190.     display: block;z-index: 300;
     
191.     margin: 0px 0px;position: absolute;top:540px; left:20px;
     
192. }
     
193. .lrc{
     
194.     width: 870px;
     
195.     height: 140px;
     
196.     overflow: hidden; filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px  0);
     
197.     position: absolute;top:500px; left:60px;z-index: 30;
     
198.     margin: 0 auto;
     
199. }
     
200. .lrc #ullrc{
     
201.     width: 100%;
     
202.     padding: 0;
     
203.     list-style: none;
     
204.     transition: 0.3s all ease;
     
205.     margin: 0;
     
206. }
     
207. /*歌词普通样式*/
     
208. .lrc #ullrc li{
     
209.     height: 80px;
     
210.     line-height: 60px;
     
211. font-family:华文隶书;
     
212.     font-size: 0px;
     
213.     color: #000078;transform: translate(0%,0%);
     
214.     font-weight: normal;
     
215.     transition: .3s all ease;/*一定要加上不然看着突兀*/
     
216.     list-style-type: none;
     
217.     text-align: center;
     
218.     display: block;
     
219.     width: 100%;
     
220.     margin: 0 auto;-webkit-background-clip: text;
     
221.      -webkit-text-fill-color: transparent;
     
222.      background-color: red;
     
223.      background-image:linear-gradient(50deg, #fff000, #ff0000, #000000, #00f000);
     
224.      background-repeat:no-repeat;
     
225.      background-position: -800px 0;
     
226.      -webkit-animation:loop 3s linear infinite;
     
227. 
     
228. }
     
229. /*动态歌词样式*/
     
230. .lrc #ullrc li.active{
     
231.     font-size: 45px;
     
232.     color: #ff0000;transform: translate(0%,0%);
     
233.     font-weight: bold;
     
234. }
     
235. 
     
236. @-webkit-keyframes loop{
     
237.      0%{background-position: -800px 0;}
     
238.      100%{background-position: -0 0;}
     
239. }
     
240. 
     
241. /*mv动画*/
     
242. .img_border{display:inline-block;width:150px;height:150px;position: absolute;top:400px; left:810px;z-index: 14;}
     
243. .img_border #aplay{border:2px solid #cccccc;border-radius:50%; transition: .3s all ease;/*一定要加上不然看着突兀*/ }
     
244. .z360z{animation:rotating 8s linear infinite;
     
245. }@keyframes rotating  {
     
246. from {transform: rotate(0deg);}
     
247. to {transform: rotate(360deg);}
     
248. }
     
249. 
     
250. </style>
     
251. 
     
252. <script>var lrc =`;
     
253. function $(id) {return document.getElementById(id);
     
254. }//这样写以后getid方便
     
255. function getLrcArray() {
     
256.     var parts = lrc.split("\n");
     
257.     for (let index = 0; index < parts.length; index++) {
     
258.         parts[index] = getLrcObj(parts[index]);
     
259.     }
     
260.     return parts;
     
261. 
     
262.     function getLrcObj(content) {
     
263.         var twoParts = content.split("]");
     
264.         var time = twoParts[0].substr(1);
     
265.         var timeParts = time.split(":");
     
266.         var seconds = +timeParts[1];
     
267.         var min = +timeParts[0];
     
268.         seconds = min * 60 + seconds;
     
269.         var words = twoParts[1];
     
270.         return{
     
271.             seconds: seconds,
     
272.             words: words,
     
273.         };
     
274.     }
     
275. }
     
276. 
     
277. var lrcArray = getLrcArray();
     
278. 
     
279. function inputLrc() {
     
280.     for (let index = 0; index < lrcArray.length; index++) {
     
281.         var li = document.createElement("li");
     
282.         li.innerText = lrcArray[index].words;
     
283.         $("ullrc").appendChild(li);
     
284.     }
     
285. }
     
286. 
     
287. inputLrc();
     
288. 
     
289. function setPosition() {
     
290.     var index = getLrcIndex();
     
291.     if (index == -1) {
     
292.         return;
     
293.     }
     
294.     var lrc_li_height = 80, lrc_ul_height = 70;
     
295.     var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
     
296.     if (top < 0) {
     
297.         top = 0;
     
298.     }
     
299.     $("ullrc").style.marginTop = -top + "px";
     
300.     var activeLi = $("ullrc").querySelector(".active");
     
301.     if(activeLi){
     
302.         activeLi.classList.remove("active");
     
303.     }
     
304.     $("ullrc").children[index].classList.add("active");
     
305. }
     
306. 
     
307. var turn = 0;
     
308. 
     
309. function getLrcIndex(){
     
310.     var time = $("MusicPlayer").currentTime + turn;
     
311.     for (var index = 0; index < lrcArray.length; index++) {
     
312.         if (lrcArray[index].seconds > time) {
     
313.             return index - 1;
     
314.         }
     
315.     }
     
316. }
     
317. 
     
318. $("MusicPlayer").ontimeupdate = setPosition;
     
319. </script>
     
320. <script>
     
321.          function bf() {
     
322.             var audio = document.getElementById('MusicPlayer');
     
323.             var bf=document.getElementById("bf");
     
324.             if (audio !== null) {
     
325.                 if (audio.paused) {
     
326.                     audio.play(); //audio.play();
     
327.                     bf.innerText="";
     
328.                 } else {
     
329.                     audio.pause();
     
330.                     bf.innerText="";
     
331.                 }
     
332.             }
     
333.         }
     
334. var image = document.getElementById("testImg"),
     
335.     button = document.getElementById("testBtn");
     
336.    
     
337. if (image.classList && image && button) {
     
338.     button.onclick = function() {
     
339.         if (this.value == '暂停') {
     
340.             image.classList.add('stop');
     
341.             this.value = '播放';
     
342.         } else {
     
343.             image.classList.remove('stop');
     
344.             this.value = '暂停';
     
345.         }
     
346.     };
     
347. }
     
348. var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
     
349. 
     
350. {document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
     
351. </script>
     

复制代码

阙歌

婴宁 发表于 2023-9-4 21:50
阙歌好，知道我是谁吗？

问好!知道的,最初认识你是在真爱音乐~~十年以上啦