天籁之音·唱红了雪山

wjlst

wjlst

唱片名称：天籁之音·唱红了雪山 2CD
唱片艺人：群星
出版发行：云南音像出版社
发行日期：2016年2月
资源格式：WAV DTS-ES6.1
唱片介绍：
来自高原的天籁人声，极具诱惑的听觉的盛宴。
音效极致HIFI的热盘,排行榜最畅销热曲，力推国内当红HIFI靓声倾情演绎

唱片名称：天籁之音·唱红了雪山 2CD
唱片艺人：群星
出版发行：云南音像出版社
发行日期：2016年2月
资源格式：WAV DTS-ES6.1
唱片介绍：
来自高原的天籁人声，极具诱惑的听觉的盛宴。
音效极致HIFI的热盘,排行榜最畅销热曲，力推国内当红HIFI靓声倾情演绎

专辑曲目：CD1
01 守望白云--央金兰泽
02.纳木措恋人--巴桑拉姆
03.守望者--旺姆
04.雪山姑娘--巴桑拉姆
05.神奇的布达拉--图桠格
06.人间天河--阿鲁阿卓
07.卓玛—亚东
08 新套马杆--乌兰托娅
09.花儿香--春雷
10.天路--韩红
11.为你等待--白玛多吉
12.我们好好爱—成林江措VS嘉央曲珍
13.坐上火车去拉萨--徐千雅
14 遇上你是我的缘--央金兰泽

专辑曲目：CD2
01.牧羊人--云朵
02.西海情歌--降央卓玛
03 布达拉--央金兰泽
04.天籁之爱—容中尔甲VS旺姆
05 火辣辣的情歌--乌兰图雅
06 我在纳林湖等着你--呼斯楞
07 高原蓝--乌兰托娅
08.香巴拉峡谷--琼雪卓玛 成林江措
09.心在飞--兰卡措
10.天边—布仁巴雅尔
11.红雪莲--高樱
12 爱是你我--刀郎 云朵
13.手心里的温柔--玉萨
14.天堂里的阿妈—嘉央曲珍

wjlst

1. <div class="cont-area">
   
2. 
   
3. <div style="position:relative;width: 1366px;height: 580px;overflow:hidden;top: -10px;left: -10px;">
   
4. <div style="left: 0px;position:absolute;top: 0px;">
   
5. 
   
6. 
   
7. <div style="z-index: !;width: 1366px; height: 580px; top:0px; left:0px;   overflow: hidden;transform:  rotate(0deg);background-size: 100% 100%;background-image:url(); text-align: center;">
   
8. 
   
9. <meta  name="referrer" content="never">
   
10. <video frameborder="0" src="http://music.lanyes.org/content/plugins/lanye_videobg/images/liuyun.mp4" autoplay muted loop="" controls="" style="position:absolute;left:0px;top:-30px;background:#000 ;width:1366px; height: 830px;>
    
11. 
    
12. <div style="color:#f88;font-size:2.5em;margin-left:560px;top:0px;"></div>
    
13. 
    
14. </div>
    
15. 
    
16. <img alt="" class="photo" src="http://www.bohann.net/data/attachment/forum/202305/31/165927ix46axpsvhab6kav.png" /><img alt="" class="photo" src="http://www.bohann.net/data/attachment/forum/202305/31/165926jkpvsdbsdb4sl6p2.png" /> <img alt="" class="photo" src="http://www.bohann.net/data/attachment/forum/202305/31/165925yzrjinrqn4s7lc9r.png" /> <img alt="" class="photo" src="http://www.bohann.net/data/attachment/forum/202305/31/165924iv0fvhg57gjqapqk.png" /> <img alt="" class="photo" src="http://www.bohann.net/data/attachment/forum/202305/31/165920qgkikaq7af0ga2gx.png" /> <img alt="" class="photo" src="http://www.bohann.net/data/attachment/forum/202305/31/165919yeb5n2ybddaodjar.png" /> <img alt="" class="photo" src="http://www.bohann.net/data/attachment/forum/202305/31/165917ujj08j0t5fhe03te.png" /> <img alt="" class="photo" src="http://www.bohann.net/data/attachment/forum/202305/31/165917u5w0wrrqu8zlrw00.png" />
    
17. <style type="text/css">
    
18. .photo {
    
19.         width: 750px;
    
20.         height: 600px;
    
21.         position: absolute;
    
22.         top:0px;
    
23.         left:450px;
    
24.         z-index: 300;
    
25.         filter:contrast(120%)brightness(100%);
    
26.         -webkit-mask-image: radial-gradient(black 30% ,transparent 75%);
    
27.         animation: round 56s infinite;
    
28.         opacity: 0;
    
29. }
    
30. 
    
31. @keyframes round {1% {
    
32. opacity: 0;
    
33. transform:translate(0%,-100%)scale(0);}
    
34. 5% {
    
35. opacity: 1;
    
36. transform:translate(0%,-100%)scale(0);}
    
37. 14% {
    
38. opacity: 1;
    
39. transform:translate(0%,0%)scale(1);}
    
40. 16% {
    
41. opacity: 1;
    
42. transform:translate(0%,0%)scale(1);}
    
43. 24% {
    
44. opacity: 0;
    
45. transform:translate(0%,100%)scale(1);}
    
46. }
    
47. 
    
48. img:nth-child(8) {animation-delay: 70s;}
    
49. img:nth-child(7) {animation-delay: 60s;}
    
50. img:nth-child(6) {animation-delay: 50s;}
    
51. img:nth-child(5) {animation-delay: 40s;}
    
52. img:nth-child(4) {animation-delay: 30s;}
    
53. img:nth-child(3) {animation-delay: 20s;}
    
54. img:nth-child(2) {animation-delay: 10s;}
    
55. img:nth-child(1) {animation-delay: 0s;}
    
56. </style>
    
57. </div>
    
58. 
    
59. 
    
60. 
    
61. <style type="text/css">
    
62. 
    
63. @keyframes mv { from { background-position: 1366px 0; } to { background-position: 0 0; } }
    
64. 
    
65. body { overflow-x: hidden; }
    
66. #baiBox {
    
67.         margin: auto;
    
68.         width: 800px;
    
69.         text-align: center;
    
70.         font-family:微软简中圆;
    
71.         font-size: 2.5rem;
    
72.         font-weight: bold;
    
73.         color: #f46ff6;
    
74.         transform-origin: top;
    
75.         animation: yao 1.0s linear infinite alternate;
    
76. }
    
77. 
    
78. @keyframes yao {
    
79.         from{  transform: perspective(800px) rotatex(30deg); }
    
80.         to { transform: perspective(800px) rotatex(-30deg); }
    
81. }
    
82. 
    
83. 
    
84. 
    
85. .tit {
    
86.        position: relative;
    
87.        width: 300px;
    
88.        height: 30px;
    
89.        top:-560px;
    
90.        LEFT: -430px;
    
91.        z-index: 100;
    
92.        filter: drop-shadow(-1px 0px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)
    
93. }
    
94. #tit:hover { color: green; }
    
95. 
    
96. </style>
    
97. 
    
98. <div id="hu" >
    
99. <div id="baiBox"
    
100. <div class="tit">
     
101. <span style="color:#fb52f9;"><span style="font-size:25px;">天籁之音·唱红了雪山 </span>
     
102. <span style="color:#3d46f7;"><span style="font-size:15px;"> - 群星</span></div>
     
103. 
     
104. 
     
105. 
     
106. <div style="position: relative;width: 500px;height: 50px;top:-120px;LEFT: 1100px;z-index: 100;filter: ">
     
107. <p><span style="color:#ff0000;"><span style="font-family:幼圆;"><span style="font-size:15px;">忘记了在线音乐</span></span></span></p></div>
     
108. 
     
109. </style>
     
110. 
     
111. 
     
112. <div style="position: relative; top:-760px;LEFT: 0px;z-index: 12435;">
     
113. <style type="text/css">
     
114. .lyricDisp{-webkit-text-stroke:1.5px #ffffff;font: bold 2.0em  悟空大字库, sans-serif; transition:.3s all ease;font-size:2.0em;}
     
115. .lyricDisp:nth-child(1){color:#000080;text-align:left;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}
     
116. .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%,#091CFD 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);}
     
117. .lyricDisp:nth-child(2){color:blue;text-align:center;font-size:0em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
     
118. #LRCShow{position:absolute;left:280px;bottom:0px;width:75%;height:120px;margin:6px auto position:relative;<!--歌词位置-->}
     
119. #rdisk{position:absolute;left:83px;bottom:60px;border-radius: 50%;font-size:4em;color:red;animation:circleSmall2 10s linear infinite;animation-play-state:paused;cursor:pointer;<!--光盘位置-->}
     
120. @keyframes circleSmall2{0%{transform:rotateX(0deg) rotateY(20deg) rotateZ(360deg);}100%{transform:rotateX(0deg) rotateY(20deg) rotate(0deg);}}
     
121. #ground3rd{
     
122.         width:1366px;height:700px;
     
123.         position:absolute;font-size:16px;
     
124.         overflow:hidden;border-radius:0px;
     
125.         margin:5px 0px 30px -5px;
     
126. background:url([url=https://s4.ax1x.com/2022/03/05/bwbPNq.jpg]https://s4.ax1x.com/2022/03/05/bwbPNq.jpg[/url]);
     
127.         background-position:center;
     
128.         background-size: cover;
     
129.         perspective: 1366px;
     
130. }
     
131. 
     
132. #mpic {
     
133.         position: absolute;
     
134.         transform: rotateY(0deg);
     
135.         top: 0px;
     
136.         left: 0px;
     
137.         width: 1366px;
     
138.         height: 700px;
     
139.         animation: rote 80s linear infinite;
     
140.         cursor: pointer;
     
141.         opacity: 1;
     
142. }
     
143. 
     
144. @keyframes rote {
     
145.         from {
     
146.                 background-position: 0 0;
     
147.                 filter: hue-rotate(360deg)
     
148.         }
     
149. 
     
150.         to {
     
151.                 background-position: -1730px 300px;
     
152.         }
     
153. }
     
154. 
     
155. #mpic1 {
     
156.         position: absolute;
     
157.         transform: rotateY(0deg);
     
158.         top: 0px;
     
159.         left: 0px;
     
160.         width: 1366px;
     
161.         height: 700px;
     
162.         animation: rotet 100s linear infinite;
     
163.         cursor: pointer;
     
164.         opacity: 1;
     
165. }
     
166. 
     
167. @keyframes rotet {
     
168.         from {
     
169.                 background-position: 0 0;
     
170.                 filter: hue-rotate(360deg)
     
171.         }
     
172. 
     
173.         to {
     
174.                 background-position: 0px -1730px;
     
175.         }
     
176. }
     
177. 
     
178. 
     
179. #songList li {
     
180.         cursor: pointer;
     
181.         color: #ffffff;
     
182.         font:thick  微软雅黑;
     
183.         font-size:15px;
     
184.         line-height:25px
     
185. }
     
186. </style>
     
187. 
     
188. 
     
189. 
     
190. 
     
191. <div id="ground3rd">
     
192. <div class="itemm">
     
193. 
     
194. <div style="width: 1366px;height: 700px;">
     
195. <div style="position:relative;width: 1366px;height: 700px;overflow:hidden;top: 0px;left: 0px;">
     
196. <div style="left: 0px;position:absolute;top: 0px;">
     
197. 
     
198. </div>
     
199. <ol id='songList' style="color:red;position:absolute;top:130px;left:60px;"><!--歌曲菜单位置--></ol>
     
200.     <div id="rdisk"style="width:100px;height:100px;border: 0px solid #000000;
     
201.         background: url('http://www.bohann.net/data/attachment/forum/202305/21/153532woco6oprxkkuut88.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);
     
202.         mask: radial-gradient(transparent 7px,#red 0);transform: rotateX(45deg) rotateY(20deg) rotate(0deg);"></div>
     
203.     <div id="LRCShow"></div>
     
204. </div>
     
205. 
     
206. 
     
207. <!-- 下面一句是存放歌词的标签        -->
     
208. <textarea style="visibility:hidden;" id='lrcContent0'></textarea>
     
209. 
     
210. <script type="text/javascript">
     
211. var lrcPlayer2=function(){return this.init.apply(this,arguments)};lrcPlayer2.prototype={constructor:lrcPlayer2,init:function(opts){this.lyricTxtObj=document.getElementById(opts.lrcTxtID);lyricTxt=this.lyricTxtObj.innerHTML;this.showLrcObj=document.getElementById(opts.lrcShowID);this.gclines=new Array();for(k=0;k<2;k++){this.gclines[k]=document.createElement('div');this.gclines[k].className='lyricDisp';this.showLrcObj.appendChild(this.gclines[k])}this.audioCtrl=document.getElementById(opts.audioCtrl);this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){this.lrcVec=new Array();var lyriclist=lyricTxt.split(/\r|\n|\r\n/);for(n=0;n<lyriclist.length;n++){chkTime=lyriclist[n].match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=lyriclist[n].lastIndexOf(']');if(tIdx>0)lrcTxt=lyriclist[n].substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime[m].substr(1).replace(']','').split(/:/);_t=(+ta[0])*60+(+ta[1]);if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push([0,'\u4ea6\u662f\u91d1\u5728\u7ebf\u97f3\u4e50\u0020\u0020\u0020\u6b22\u8fce\u4f60\uff01'])}this.lrcVec.push([_t,lrcTxt])}}}this.lrcVec.sort(function(a,b){return(a[0]-b[0])})},showLrc:function(durTime){this.gclines[0].innerHTML=this.gclines[0].dataset.lrc=this.lrcVec[this.idx][1].length>0?this.lrcVec[this.idx][1]:"\u3000";this.gclines[0].style.setProperty('--aniName','bgMove'+(this.idx%2));this.gclines[0].style.setProperty('--durTime',durTime+'ms');this.gclines[0].style.setProperty('--aniPlayState','running')},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.src=mUrl;this.showLrcObj.appendChild(this.mObj);this.idx=0;var that=this;this.mObj.addEventListener('ended',function(){that.idx=0});this.mObj.addEventListener('playing',function(){that.audioCtrl.style.animationPlayState='running';that.gclines[0].style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.audioCtrl.style.animationPlayState='paused';that.gclines[0].style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.showLrcObj.style.display='none';that.showLrcObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(this.currentTime>that.lrcVec[that.idx][0]){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec[that.idx+1][0]-that.lrcVec[that.idx][0])*950)}else{that.showLrc((this.duration-that.lrcVec[that.idx][0])*950)}if(that.idx+1==that.lrcVec.length){that.gclines[1].innerHTML=""}else{that.gclines[1].innerHTML=that.lrcVec[that.idx+1][1]}that.idx++}});this.audioCtrl.onclick=function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}};try{this.mObj.play()}catch(err){console.log(err.message)}},stopMusic:function(){this.mObj.pause();this.mObj.controls=false;},setAudioUrl:function(mUrl){this.mObj.src=mUrl},isMusicEnd:function(){return this.mObj.ended},reStart:function(){this.idx=0;this.mObj.play()}}
     
212. </script>
     
213. 
     
214. <script type="text/javascript">
     
215. (function()        {
     
216. songParas = [
     
217. ["手心里的温柔--玉萨","","http://chuangshicdn.data.mvbox.cn/music/yc/23/05/31/23053113572600327734.mp3",`[00:00.00]正播放：手心里的温柔--玉萨`],
     
218. ["我在纳林湖等着你--呼斯楞","","http://chuangshicdn.data.mvbox.cn/music/yc/23/05/31/23053113510072113353.mp3",`[00:00.00]正播放：我在纳林湖等着你--呼斯楞`],
     
219. ["天籁之爱—容中尔甲VS旺姆","","http://chuangshicdn.data.mvbox.cn/music/yc/23/05/31/23053113484495629247.mp3",`[00:00.00]正播放：天籁之爱—容中尔甲VS旺姆`],
     
220. ["爱是你我--刀郎 云朵","","http://chuangshicdn.data.mvbox.cn/music/yc/23/05/31/23053113563798796915.mp3",`[00:00.00]正播放：爱是你我--刀郎 云朵`],
     
221. ["牧羊人--云朵","","http://chuangshicdn.data.mvbox.cn/music/yc/23/05/31/23053113450376334524.mp3",`[00:00.00]正播放：牧羊人--云朵`],
     
222. ["西海情歌--降央卓玛","","http://chuangshicdn.data.mvbox.cn/music/yc/23/05/31/23053113462095388441.mp3",`[00:00.00]正播放：西海情歌--降央卓玛`],
     
223. ["布达拉--央金兰泽","","http://chuangshicdn.data.mvbox.cn/music/yc/23/05/31/23053113472014611935.mp3",`[00:00.00]正播放：布达拉--央金兰泽`],
     
224. ["火辣辣的情歌--乌兰图雅","","http://chuangshicdn.data.mvbox.cn/music/yc/23/05/31/23053113495270268148.mp3",`[00:00.00]正播放：火辣辣的情歌--乌兰图雅`],
     
225. ["高原蓝--乌兰托娅","","http://chuangshicdn.data.mvbox.cn/music/yc/23/05/31/23053113514621984614.mp3",`[00:00.00]正播放：高原蓝--乌兰托娅`],
     
226. ["香巴拉峡谷--琼雪卓玛 成林江措","","http://chuangshicdn.data.mvbox.cn/music/yc/23/05/31/23053113523588693621.mp3",`[00:00.00]正播放：香巴拉峡谷--琼雪卓玛 成林江措`],
     
227. ["心在飞--兰卡措","","http://chuangshicdn.data.mvbox.cn/music/yc/23/05/31/23053113533250204910.mp3",`[00:00.00]正播放：心在飞--兰卡措`],
     
228. ["天边—布仁巴雅尔","","http://chuangshicdn.data.mvbox.cn/music/yc/23/05/31/23053113542409403738.mp3",`[00:00.00]正播放：天边—布仁巴雅尔`],
     
229. ["红雪莲--高樱","","http://chuangshicdn.data.mvbox.cn/music/yc/23/05/31/23053113554666917331.mp3",`[00:00.00]正播放：红雪莲--高樱`],
     
230. ["天堂里的阿妈—嘉央曲珍","","http://chuangshicdn.data.mvbox.cn/music/yc/23/05/31/23053113581377507795.mp3",`[00:00.00]正播放：天堂里的阿妈—嘉央曲珍`],
     
231. ];
     
232. 
     
233. var opts = {
     
234.         lrcTxtID:'lrcContent0',
     
235.         lrcShowID:"LRCShow",
     
236.         audioURL:"https://www.qqmc.com/up/kwlink.php?id=60010502&.mp3",
     
237.         audioCtrl:'rdisk'
     
238. };
     
239. var km = null;
     
240. var idx = 0;
     
241. let songList = document.getElementById('songList');
     
242. 
     
243.         for(n = 0; n < songParas.length; n++)        {
     
244.                 let item = document.createElement('li');
     
245.                 item.id = 's'+n;
     
246.                 item.innerHTML = songParas[n][0];
     
247.                
     
248.                 songList.appendChild(item);
     
249.         }
     
250. 
     
251.         items = songList.getElementsByTagName('li');
     
252.         
     
253.         for(n = 0 ; n < items.length; n++)        {
     
254.                 items[n].onclick=function()        {
     
255.                         idx = parseInt(this.id.substr(1));
     
256.                         document.getElementById('ground3rd').style.backgroundImage = `url(${songParas[idx][1]})`;
     
257.                         if(km){
     
258.                                 km.stopMusic();
     
259.                                 //km = null;
     
260.                                 km.handleLrc(songParas[idx][3]);
     
261.                                 km.setAudioUrl(songParas[idx][2]);
     
262.                                 km.reStart();
     
263.                         }
     
264.                         else        {
     
265.                                 document.getElementById(opts.lrcTxtID).innerHTML = songParas[idx][3];
     
266.                                 opts.audioURL=songParas[idx][2];
     
267.                                 km = new lrcPlayer2(opts);
     
268.                         }
     
269.                 }
     
270.         }
     
271.         items[0].click();
     
272. 
     
273. setInterval(() => {
     
274.         if(km)        {
     
275.                 items = songList.getElementsByTagName('li');
     
276.                 if(km.isMusicEnd())        {
     
277.                         idx++; idx %= items.length;
     
278.                         items[idx].click();
     
279.                 }
     
280.         }
     
281.         //setTimeout(isSongEnded, 500);
     
282. }, 500);
     
283. 
     
284. })();
     
285. </script>
     

复制代码

醉美水芙蓉

欣赏老师精心设计的精彩特效动画！

醉美水芙蓉

歌曲好听！老师收集辛苦了！

醉美水芙蓉

免抠图图素材真漂亮！

klxf

视听盛宴，饕餮大餐，谢谢wjlst老师无私分享

hongmeigui

感谢分享，带来新的灵感啦哟

changqinggongan

分享超给力，点赞竖拇指

xibaoe

支持发布，内容超有品质