菊~~王庆爽

一师

[i=s] 本帖最后由 一师 于 2025-10-16 17:15 编辑 [/i]

 

 

 

 

 

 

 

 

 

 

 

 

山水人家

欣赏老师精彩视频佳作，上午好。

乐和Ⅱ

欣赏精彩制作！

沧海笑

欣赏老师佳作！

阿强

                 欣赏一师老师的音画制作—— 菊   

廖若晨星

欣赏一师老师制作视频歌，上午好
。

老梦缘

欣赏老师精美分享，祝老师幸福快乐！

海姆

好长时间没有看到你的作品，欣赏【菊】音画制作，动听 漂亮！

一师

山水人家 发表于 2022-10-7 08:57
欣赏老师精彩视频佳作，上午好。

谢谢老师，周末愉快！

一师

1. .wall{width:970px;height: 600px;
   
2.     position: absolute;
   
3.     top: 0;
   
4.     left: 0;
   
5.     bottom: 0;
   
6.     right: 0;z-index: 1;
   
7. }
   
8. div.book-wrap {width: 420px;
   
9.             height:350px;
   
10.             position: relative;
    
11.             left: 500px;
    
12.             top: 140px;
    
13.             transform: rotatez(4deg)rotateX(24deg);
    
14.             transform-style: preserve-3d;}
    
15. div.page { width: 100%;
    
16.         height: 100%;
    
17.         position: absolute;
    
18.         border-radius: 2px;border: 15px solid #cccccc;
    
19.         transform-origin: left;display: flex;
    
20.     justify-content: center;
    
21.    align-items: center;
    
22.      box-shadow:  0px 0px 0px 2px #000000;
    
23.         background-size:100% 100%;}
    
24. div.book-content {animation: roll 22s  22s   1;background-image: url(https://s1.ax1x.com/2022/10/05/x19mNj.jpg)}
    
25. div.book-content1{animation: roll  4s 18s  2;background-image: url(https://s1.ax1x.com/2022/10/05/x19n4s.jpg)}
    
26. div.book-content2{animation: roll  6s 16s  infinite;background-image: url(https://s1.ax1x.com/2022/10/05/x19KCn.jpg)}
    
27. div.book-content3{animation: roll  8s 14s  1;background-image: url(https://s1.ax1x.com/2022/10/05/x19M3q.jpg)}
    
28. div.book-content4{animation: roll 10s 12s  infinite;background-image: url(https://s1.ax1x.com/2022/10/05/x19Qg0.jpg)}
    
29. div.book-content5{animation: roll 12s 10s  1;background-image: url(https://s1.ax1x.com/2022/10/05/x193uT.jpg)}
    
30. div.book-content6{animation: roll 14s  8s  2;background-image: url(https://s1.ax1x.com/2022/10/05/x198DU.jpg)}
    
31. div.book-content7{animation: roll 16s  6s  infinite;background-image: url(https://s1.ax1x.com/2022/10/05/x19GbF.jpg)}
    
32. div.book-content8{animation: roll 18s  4s  2;background-image: url(https://s1.ax1x.com/2022/10/05/x19YE4.jpg)}
    
33. div.book-content9{animation: roll 20s  2s   infinite;background-image: url(https://s1.ax1x.com/2022/10/05/x1CvYd.jpg)}
    
34. 
    
35. .stop div.book-content {animation: roll 22s  22s 1;animation-play-state: paused;}
    
36. .stop div.book-content1{animation: roll  4s 18s  2;animation-play-state: paused;}
    
37. .stop div.book-content2{animation: roll  6s 16s  infinite;animation-play-state: paused;}
    
38. .stop div.book-content3{animation: roll  8s 14s  1;animation-play-state: paused;}
    
39. .stop div.book-content4{animation: roll 10s 12s  infinite;animation-play-state: paused;}
    
40. .stop div.book-content5{animation: roll 12s 10s  1;animation-play-state: paused;}
    
41. .stop div.book-content6{animation: roll 14s  8s  2;animation-play-state: paused;}
    
42. .stop div.book-content7{animation: roll 16s  6s  infinite;animation-play-state: paused;}
    
43. .stop div.book-content8{animation: roll 18s  4s  2;animation-play-state: paused;}
    
44. .stop div.book-content9{animation: roll 20s  2s   infinite;animation-play-state: paused;}
    
45.         @keyframes roll {
    
46.   0% {transform: rotateY(0deg);opacity: 1;}
    
47. 4% {transform: rotateY(-8deg);opacity: 1;}
    
48. 30% {transform: rotateY(-170deg);opacity: 1;}
    
49. 40% {transform: rotateY(-178deg);opacity: 1;}
    
50. 50% {transform: rotateY(-180deg);opacity: 1;}
    
51. 100% {transform: rotateY(-180deg);opacity: 1;}
    
52. 
    
53. }
    
54. div#midground{width:970px;height: 600px;
    
55.     z-index: 1;
    
56. animation: cc 3s linear infinite;
    
57. }
    
58. .stop div#midground {animation-play-state: paused;}
    
59. @keyframes cc  {0% {opacity: 1;background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(21, 4, 255, 0) 25%,#FB0505 75%);filter:hue-rotate(0deg)contrast(150%)brightness(80%);}
    
60. 50% {opacity: 1;background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(21, 4, 255, 0) 29%,#0521FB 85%);filter:hue-rotate(0deg)contrast(140%)brightness(110%);}
    
61. 100% {opacity:1 ;background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(8, 237, 73, 0) 29%,#05FB51 85%);filter:hue-rotate(0deg)contrast(120%)brightness(100%);}
    
62. }
    
63. 
    
64. div#foreground{
    
65.                 font-weight: bold;
    
66.             
    
67.             margin: 0px 0px;      
    
68.                  z-index: 5;
    
69.                 animation: aitf 0.15s linear infinite;
    
70.         }
    
71. .stop div#foreground{animation-play-state: paused;}
    
72.         @keyframes aitf {
    
73.                 0% { filter:hue-rotate(360deg)drop-shadow(0 0 38px #000080)contrast(120%)brightness(240%) ; }
    
74.                 100% {filter:hue-rotate(0deg)drop-shadow(0 0 18px #fff000)contrast(120%)brightness(140%) ; }
    
75.         }
    
76. 
    
77. div#top{width: 970px;height: 600px;
    
78.     background: url("http://www.100sucai.com/online/4234/images/stars.png")0 0/90% 90%;
    
79.     z-index: 4;opacity: 1;
    
80. animation: da 50s linear infinite;
    
81. }
    
82. .stop div#top{animation-play-state: paused;}
    
83. @keyframes da {
    
84.     0%{
    
85.         background-position: 200% 0;filter:hue-rotate(0deg)contrast(180%)brightness(340%);
    
86.     }
    
87.     100%{
    
88.         background-position: 0 600%;filter:hue-rotate(0deg)contrast(180%)brightness(240%);
    
89.     }
    
90. }
    
91. 
    
92. div#cp{width: 150px;height: 150px;
    
93.     border:2px solid #ffffff; -webkit-mask: radial-gradient(transparent 10px,red 0); border-radius: 50%; cursor: pointer;220px;background:url(http://pan.yinhuabbs.cn/view.php/a60d7a6c4172d96080d4e23d80d9af48.png)0 0/100% 100%,url(https://s1.ax1x.com/2022/09/08/vqu2H1.jpg)0px 0px/160%  100%;
    
94.     z-index: 4; margin: 420px 50px;
    
95. animation: pp 10s linear infinite;
    
96. }
    
97. .stop div#cp{
    
98.   animation-play-state: paused;
    
99. }
    
100. @keyframes pp {0% { transform: rotateY(0deg)rotate(-360deg);filter: hue-rotate(180deg)brightness(150%)drop-shadow(0 0 10px #00ff00)}
     
101. 
     
102. }
     
103. 
     
104. 
     
105. div#plane {position: absolute;left: 450px;top: 40px;width: 400px;height: 400px;animation: move 0.12s linear infinite;background: url
     
106. ("http://pan.yinhuabbs.cn/view.php/ee1f2925815538fb07ef4afd9fda49d8.png")0 0/20% 20%;z-index: 3;
     
107. }
     
108. .stop div#plane{animation-play-state: paused;}
     
109. @keyframes move  {0%{opacity: 1;transform:translate(0%,0%)scale(1);}
     
110.     99% {opacity: 1;filter:hue-rotate(360deg);transform:translate(0%,0%)scale(2);}
     
111. 
     
112. 100%{opacity: 0;filter:hue-rotate(0deg);transform:translate(0%,0%)scale(3);}
     
113. 
     
114. }
     
115. 
     
116. </style>
     
117. 
     
118. 
     
119. <div style="z-index: 127;width: 970px; height: 600px; margin-top:30px; margin-left:-170px;  box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; overflow: hidden;transform:  rotate(0deg);background: linear-gradient(54deg, #0B0B0B 0%,#6E6BE5 100%);text-align: center;">
     
120. <div class="HT"><div class="wall" id="testImg">
     
121. <div class="wall" >
     
122. <div class="book-wrap" id="testImg">
     
123. 
     
124. <div class="page book-content" > </div>
     
125. <div class="page  book-content1"  > </div>
     
126. 
     
127. <div class="page  book-content2" > </div>
     
128. 
     
129. <div class="page book-content3"  > </div>
     
130. 
     
131. <div class="page  book-content4" > </div>
     
132. 
     
133. <div class="page  book-content5" > </div>
     
134. 
     
135. <div class="page  book-content6"  > </div>
     
136. 
     
137. <div class="page  book-content7"  > </div>
     
138. 
     
139. <div class="page  book-content8" > </div>
     
140. 
     
141. <div class="page book-content9"  > </div>
     
142. 
     
143. 
     
144. </div></div>
     
145. <div class="wall" id="midground"></div>
     
146. 
     
147. <div class="wall" id="foreground"><div class="lrc">
     
148. <ul id="ullrc">
     
149.          </ul>
     
150.       </div></div>
     
151. 
     
152. <div class="wall" id="top"> </div>
     
153. <div class="wall" id="plane"><img src="http://pan.yinhuabbs.cn/view.php/0ea5380aee9a56531bb64a28659e02d0.png" style="width: 100%; height: 100%;" > </div>
     
154. 
     
155. <div class="wall" id="cp"> </div>
     
156. 
     
157. 
     
158. </div>
     
159. </div>
     
160. 
     
161. 
     
162.   <audio autoplay=""  id="MusicPlayer"  src="http://link.hhtjim.com/kw/6968586.mp3" loop="" ></audio>
     
163. 
     
164.   <div class="btn">
     
165. <div   id="testImg" onclick="bf()">
     
166. <input  type="button" id="testBtn" value="||"style="width: 40px; height: 40px;border-radius: 0%;color: #ffffff;font-size:20px;font-weight:bold;border:2px solid #ffffff;-webkit-background-clip : text;overflow: hidden;"></input ></div></div>
     
167. 
     
168. </div></div>
     
169. 
     
170. <style type="text/css">
     
171. .HT{
     
172.     width: 1px;position: absolute;top:0px; left:0px;
     
173. }
     
174. #MusicPlayer{
     
175.     width: 250px;
     
176.     display: block;
     
177.     margin: 0 auto;
     
178. }
     
179. .btn{
     
180.     display: block;z-index: 300;
     
181.     margin: 0px 0px;position: absolute;top:540px; left:920px;
     
182. }
     
183. .lrc{
     
184.     width: 980px;
     
185.     height: 140px;
     
186.     overflow: hidden;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px  0);
     
187.     display: block;position: absolute;top:500px; left:60px;z-index: 30;
     
188.     margin: 0 auto;
     
189. }
     
190. .lrc #ullrc{
     
191.     width: 100%;
     
192.     padding: 0;
     
193.     list-style: none;
     
194.     transition: 0.3s all ease;
     
195.     margin: 0;
     
196. }
     
197. /*歌词普通样式*/
     
198. .lrc #ullrc li{
     
199.     height: 80px;
     
200.     line-height: 60px;
     
201. font-family:华文隶书;
     
202.     font-size: 0px;
     
203.     color: #000078;transform: translate(0%,0%);
     
204.     font-weight: normal;
     
205.     transition: .3s all ease;/*一定要加上不然看着突兀*/
     
206.     list-style-type: none;
     
207.     text-align: center;
     
208.     display: block;
     
209.     width: 100%;
     
210.     margin: 0 auto;background: linear-gradient(180deg, #07F6AE 18%,#2B40C0 31%,#8AFF00 46%,#F9FBFD 65%,#B92939 80%);
     
211.      -webkit-text-fill-color : transparent; /*将颜色设置为透明*/
     
212. -webkit-background-clip : text; /*背景裁剪，必不可少*/
     
213. 
     
214. }
     
215. /*动态歌词样式*/
     
216. .lrc #ullrc li.active{
     
217.     font-size: 40px;
     
218.     color: #ff0000;transform: translate(0%,0%);
     
219.     font-weight: bold;
     
220. }
     
221. 
     
222. 
     
223. 
     
224. /*歌词动画*/
     
225. .img_border{ position: absolute;top:0px; left:0px;z-index: 250;display: block;}
     
226. .img_border  #aplay{ }
     
227. .z360z{animation:rotating 0s linear infinite;}
     
228. @keyframes rotating  {0% { transform: rotateY(-90deg)rotate(-180deg);filter: hue-rotate(180deg)brightness(150%)drop-shadow(0 0 10px #00ff00)}
     
229. 50% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(100%)drop-shadow(0 0 8px #000080) }
     
230. 100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(150%)drop-shadow(0 0 16px #ff0000)}
     
231. }
     
232. </style>
     
233. 
     
234. <script>var lrc =`[00:00.40]菊
     
235. 
     
236. 
     
237. [ver:v1.0]
     
238. [ti:6968586]
     
239. [00:00.60]菊-王庆爽
     
240. [00:01.20]词：房千 曲：姚晓强
     
241. [00:32.55]你笑看天下悄悄滴绽放芳华
     
242. [00:42.01]梦里追寻着春天春天的步伐
     
243. [00:51.13]你却不愿华丽转身把爱深深埋下
     
244. [01:00.65]凌寒而立寂寞中有多少快乐潇洒
     
245. [01:10.38]谁知你那滚烫的心已将冰雪融化
     
246. [01:19.89]啊残阳下月朦胧
     
247. [01:25.30]月朦胧清风中
     
248. [01:29.59]你的香已飘遍千家万家
     
249. [02:08.62]你笑看天下悄悄滴绽放芳华
     
250. [02:18.15]梦里追寻着春天春天的步伐
     
251. [02:27.24]你却不愿华丽转身把爱深深埋下
     
252. [02:36.65]凌寒而立寂寞中有多少快乐潇洒
     
253. [02:46.46]谁知你那滚烫的心已将冰雪融化
     
254. [02:55.71]啊残阳下月朦胧
     
255. [03:00.77]月朦胧清风中
     
256. [03:05.41]你的香已飘遍千家万家
     
257. [03:15.85]啊啊啊
     
258. [03:30.31]香已飘遍千家万家
     
259. 
     
260. 
     
261. 
     
262. `;
     
263. function $(id) {return document.getElementById(id);
     
264. }//这样写以后getid方便
     
265. function getLrcArray() {
     
266.     var parts = lrc.split("\n");
     
267.     for (let index = 0; index < parts.length; index++) {
     
268.         parts[index] = getLrcObj(parts[index]);
     
269.     }
     
270.     return parts;
     
271. 
     
272.     function getLrcObj(content) {
     
273.         var twoParts = content.split("]");
     
274.         var time = twoParts[0].substr(1);
     
275.         var timeParts = time.split(":");
     
276.         var seconds = +timeParts[1];
     
277.         var min = +timeParts[0];
     
278.         seconds = min * 60 + seconds;
     
279.         var words = twoParts[1];
     
280.         return{
     
281.             seconds: seconds,
     
282.             words: words,
     
283.         };
     
284.     }
     
285. }
     
286. 
     
287. var lrcArray = getLrcArray();
     
288. 
     
289. function inputLrc() {
     
290.     for (let index = 0; index < lrcArray.length; index++) {
     
291.         var li = document.createElement("li");
     
292.         li.innerText = lrcArray[index].words;
     
293.         $("ullrc").appendChild(li);
     
294.     }
     
295. }
     
296. 
     
297. inputLrc();
     
298. 
     
299. function setPosition() {
     
300.     var index = getLrcIndex();
     
301.     if (index == -1) {
     
302.         return;
     
303.     }
     
304.     var lrc_li_height = 80, lrc_ul_height = 70;
     
305.     var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
     
306.     if (top < 0) {
     
307.         top = 0;
     
308.     }
     
309.     $("ullrc").style.marginTop = -top + "px";
     
310.     var activeLi = $("ullrc").querySelector(".active");
     
311.     if(activeLi){
     
312.         activeLi.classList.remove("active");
     
313.     }
     
314.     $("ullrc").children[index].classList.add("active");
     
315. }
     
316. 
     
317. var turn = 0;
     
318. 
     
319. function getLrcIndex(){
     
320.     var time = $("MusicPlayer").currentTime + turn;
     
321.     for (var index = 0; index < lrcArray.length; index++) {
     
322.         if (lrcArray[index].seconds > time) {
     
323.             return index - 1;
     
324.         }
     
325.     }
     
326. }
     
327. 
     
328. $("MusicPlayer").ontimeupdate = setPosition;
     
329. </script>
     
330. <script>
     
331.          function bf() {
     
332.             var audio = document.getElementById('MusicPlayer');
     
333.             var bf=document.getElementById("bf");
     
334.             if (audio !== null) {
     
335.                 if (audio.paused) {
     
336.                     audio.play(); //audio.play();
     
337.                     bf.innerText="";
     
338.                 } else {
     
339.                     audio.pause();
     
340.                     bf.innerText="";
     
341.                 }
     
342.             }
     
343.         }
     
344. var image = document.getElementById("testImg"),
     
345.     button = document.getElementById("testBtn");
     
346.    
     
347. if (image.classList && image && button) {
     
348.     button.onclick = function() {
     
349.         if (this.value == '||') {
     
350.             image.classList.add('stop');
     
351.             this.value = '&#10148;';
     
352.         } else {
     
353.             image.classList.remove('stop');
     
354.             this.value = '||';
     
355.         }
     
356.     };
     
357. }
     
358. var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
     
359. 
     
360. {document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);  
     
361. </script>

复制代码