克隆亚伦老师《蚕花姑娘》

一师

《蚕花姑娘》-石头

一师

1. <style type="text/css">.itemm {z-index: 1;width: 710px;
   
2. height: 420px;position: relative;
   
3. box-shadow:  0px 0px 0px 2px #CCCCCC, 0px 0px 0px 4px #222222;MARGIN-LEFT:120px;margin-top:38px;
   
4. ox-sizing: border-box;background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/50% 50%,linear-gradient(30deg, #0f9b0f, #000000, #eb0000,
   
5. 
   
6. #cc5333, #23074d);
   
7. overflow:hidden;border-radius:0%;
   
8. transform-origin: center;}
   
9. </style >
   
10. <div style="z-index: 5;width: 940px; height:490px;position: relative; margin-top:30px; margin-left:-80px;  overflow: hidden;
    
11. background: url(http://pan.yinhuabbs.cn/view.php/df1d340970056b10537389b3dd607c2f.png)0 0/100%  100%; text-align: center;">
    
12. <div class="itemm">
    
13. <video autoplay="autoplay" height="420" loop="loop" muted="true" src="http://chuangshicdn.data.mvbox.cn/music/yc/21/09/25/21092509085202141701.mp4"
    
14. 
    
15. style="width:710px;height:420px; filter:contrast(120%);-webkit-mask-image: radial-gradient(black 100% ,transparent 100%);z-index: 15;transform: scale(1, 1)"
    
16. 
    
17. width="710">&nbsp;</video>
    
18. <audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=215618825&.mp3" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
    
19. 
    
20. <span class="items" style="color:#ff0000;position:absolute;top:10px;left:20px;width:400px;height:42px;z-index: 100;"><span style="font-family:华文行楷;filter:drop-shadow(#ffffff
    
21. 
    
22. 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px  0);"><span style="font-size:30px;">《蚕花姑娘》-石头 </span></span></span>
    
23. <div class="container">
    
24. <div class="btn">
    
25.         <div id="bf"onclick="bf();"style="width: 600px; height: 80px;z-index: 300;position: absolute;top:-70px; left:90px;"></div>
    
26.        </div>
    
27. <div class="img_border"><img src="http://image.hnol.net/c/2022-01/08/22/202201082235389221-5769293.png" id="aplay"style="width: 100%; height: 100%;position: absolute;top:-90px;
    
28. 
    
29. left:30px;z-index: 10;" ></div>
    
30. <div class="items" >
    
31. <div  class="lrc"style="z-index: 200;width: 600px; height: 80px;position: absolute;top:-70px; left:90px;">
    
32.         <ul id="ullrc">
    
33.          </ul>
    
34.       </div></div>
    
35. </div>
    
36. </div></div>
    
37. <style type="text/css">
    
38. .container{width: 1px;
    
39.     position: absolute;top:400px; left:-20px;
    
40. }
    
41. .container #MusicPlayer{
    
42.     width: 250px;
    
43.     display: block;
    
44.     margin: 0 auto;
    
45. }
    
46. .container .btn{
    
47.     display: block;
    
48.     margin: 0;
    
49. }
    
50. .container .lrc{
    
51.     width: 600px;
    
52.     height: 120px;
    
53.     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);
    
54.     display: block;
    
55.     margin: 0 auto;
    
56. }
    
57. .container .lrc #ullrc{
    
58.     width: 100%;
    
59.     padding: 0;
    
60.     list-style: none;
    
61.     transition: 0.3s all ease;
    
62.     margin: 0;
    
63. }
    
64. /*歌词普通样式*/
    
65. .container .lrc #ullrc li{
    
66.     height: 70px;
    
67.     line-height: 70px;
    
68. font-family:悟空大字库;
    
69.     font-size: 0px;
    
70.     color: #000078;
    
71.     font-weight: normal;
    
72.     transition: .3s all ease;/*一定要加上不然看着突兀*/
    
73.     list-style-type: none;
    
74.     text-align: center;
    
75.     display: block;
    
76.     width: 100%;
    
77.     margin: 0 auto;
    
78. 
    
79. }
    
80. /*动态歌词样式*/
    
81. .container .lrc #ullrc li.active{
    
82.     font-size: 30px;
    
83.     color: #ff0000;
    
84.     font-weight: bold;
    
85. }
    
86. /*光碟动画*/
    
87. .container .img_border{display:inline-block;width:80px;height:80px;margin:0px ;position: absolute;top:0px; left:0px;transform: scale(1,1);transform: rotateX(45deg) rotateY(-20deg)
    
88. 
    
89. ; }
    
90. .container .img_border #aplay{border:2px solid #000000;border-radius:50%;}
    
91. .container .z360z{-webkit-animation:rotating 10s linear infinite;}@-webkit-keyframes rotating{0% {transform:rotateZ(-360deg);}}
    
92. </style>
    
93. <style type="text/css">.items  { animation: slider 0.26s linear infinite ;}
    
94. @keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
    
95. 50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
    
96. </style>
    
97. <script >var lrc = `[00:03.73]《蚕花姑娘》-石头
    
98. [00:04.53]素材来自网络
    
99. [00:05.44]作词 Lyries：罗志强
    
100. [00:06.97]作曲 Composer：杨昊东
     
101. [00:08.28]监制 Executive Producer：向益江
     
102. [00:09.88]编曲 Music Arrangement：杨昊东
     
103. [00:11.60]和声 Backing Vocals：北京女童合唱团
     
104. [00:13.64]吉他 Guitar：Derek Yang
     
105. [00:14.84]笛子bamboo flute：朱炜
     
106. [00:16.59]统筹 Associate Producer：周川源
     
107. [00:17.90]录音工程师 Recording Engineer：Derek Yang
     
108. [00:19.15]录音室 Recording Studio：莫干山INT音乐工作室
     
109. [00:20.35]混音工程师 Mixing Engineer：Derek Yang、AlexM
     
110. [00:21.41]制作人 亚伦
     
111. [00:22.61]出品：亚伦影音
     
112. [00:23.75]制作/宣传/发行：亚伦影音工作室
     
113. [00:24.88]【欢迎使用克隆代码】
     
114. [00:26.40]
     
115. [00:27.56]
     
116. [00:28.03]烟雨空濛状元桥
     
117. [00:30.94]清明落雨桑树如常
     
118. [00:34.20]千年古镇落落大方
     
119. [00:37.42]挽袖织蚕屋檐下的姑娘
     
120. [00:43.85]苕溪河畔鼓声响
     
121. [00:46.90]身骑白马蚕花抛洒
     
122. [00:50.07]拂袖起舞浅吟低唱
     
123. [00:53.15]岸边琴声勾勒着你的模样
     
124. [01:00.32]
     
125. [01:01.93]你发戴蚕花笑靥浅浅
     
126. [01:08.20]化身为福 留守人间
     
127. [01:14.51]如风如雨 灌溉桑田
     
128. [01:20.91]画一卷丹青阅读千年
     
129. [01:28.53]
     
130. [01:43.58]烟雨空濛状元桥
     
131. [01:46.79]清明落雨桑树如常
     
132. [01:50.04]千年古镇落落大方
     
133. [01:53.11]挽袖织蚕屋檐下的姑娘
     
134. [01:59.60]苕溪河畔鼓声响
     
135. [02:02.60]身骑白马蚕花抛洒
     
136. [02:05.86]拂袖起舞浅吟低唱
     
137. [02:09.03]岸边琴声勾勒着你的模样
     
138. [02:16.24]
     
139. [02:17.75]你发戴蚕花笑靥浅浅
     
140. [02:23.63]化身为福 留守人间
     
141. [02:30.35]如风如雨 灌溉桑田
     
142. [02:36.69]画一卷丹青阅读千年
     
143. [02:42.66]
     
144. [02:44.54]你发戴蚕花笑靥浅浅
     
145. [02:50.62]化身为福 留守人间
     
146. [02:57.20]你摇曳轻舟泊游故里
     
147. [03:03.43]指尖年轮 孜孜不倦
     
148. [03:09.88]如诗如画 墨染万家
     
149. [03:16.19]这位姑娘，取名蚕花
     
150. [03:24.07]这位姑娘，取名蚕花
     
151. [03:37.12]欢迎欣赏
     
152. [04:37.12]打造完美音画`;
     
153. </script>
     
154. <script type="text/javascript">
     
155. function $(id) {return document.getElementById(id);
     
156. }//这样写以后getid方便
     
157. function getLrcArray() {
     
158.     var parts = lrc.split("\n");
     
159.     for (let index = 0; index < parts.length; index++) {
     
160.         parts[index] = getLrcObj(parts[index]);
     
161.     }
     
162.     return parts;
     
163. 
     
164. function getLrcObj(content) {
     
165.         var twoParts = content.split("]");
     
166.         var time = twoParts[0].substr(1);
     
167.         var timeParts = time.split(":");
     
168.         var seconds = +timeParts[1];
     
169.         var min = +timeParts[0];
     
170.         seconds = min * 60 + seconds;
     
171.         var words = twoParts[1];
     
172.         return{
     
173.             seconds: seconds,
     
174.             words: words,
     
175.         };
     
176.     }
     
177. }
     
178. 
     
179. var lrcArray = getLrcArray();
     
180. 
     
181. function inputLrc() {
     
182.     for (let index = 0; index < lrcArray.length; index++) {
     
183.         var li = document.createElement("li");
     
184.         li.innerText = lrcArray[index].words;
     
185.         $("ullrc").appendChild(li);
     
186.     }
     
187. }
     
188. 
     
189. inputLrc();
     
190. 
     
191. function setPosition() {
     
192.     var index = getLrcIndex();
     
193.     if (index == -1) {
     
194.         return;
     
195.     }
     
196.     var lrc_li_height = 70, lrc_ul_height = 50;
     
197.     var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
     
198.     if (top < 0) {
     
199.         top = 0;
     
200.     }
     
201.     $("ullrc").style.marginTop = -top + "px";
     
202.     var activeLi = $("ullrc").querySelector(".active");
     
203.     if(activeLi){
     
204.         activeLi.classList.remove("active");
     
205.     }
     
206.     $("ullrc").children[index].classList.add("active");
     
207. }
     
208. var turn = 0;
     
209. function getLrcIndex(){
     
210.     var time = $("MusicPlayer").currentTime + turn;
     
211.     for (var index = 0; index < lrcArray.length; index++) {
     
212.         if (lrcArray[index].seconds > time) {
     
213.             return index - 1;
     
214.         }
     
215.     }
     
216. }
     
217. 
     
218. $("MusicPlayer").ontimeupdate = setPosition;
     
219. 
     
220. function bf() {
     
221.             var audio = document.getElementById('MusicPlayer');
     
222.             var bf=document.getElementById("bf");
     
223.             if (audio !== null) {
     
224.                 if (audio.paused) {
     
225.                     audio.play(); //audio.play();// 这个就是播放  
     
226.                     bf.innerText="";
     
227.                 } else {
     
228.                     audio.pause(); // 这个就是暂停
     
229.                     bf.innerText="";
     
230.                 }
     
231.             }
     
232.         }
     
233. 
     
234. var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
     
235. 
     
236. {document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
     
237. </script>
     
238. 
     

复制代码

廖若晨星

欣赏一师老师音画歌曲 :《蚕花姑娘》下午好

林林五

欣赏老师美好手机收i你音乐！

秋思梦景

肖燕

色彩协调，歌曲好听耐听。

沧海笑

欣赏了克隆音画。

真真

欣赏美好，谢谢一师！

杨姥姥

山水人家

一师 发表于 2022-4-29 17:37

欣赏老师克隆佳作。