《十年网络红歌 (经典篇) 》 CD2

亦是金 发表于 2023-9-22 10:54

<div class="cont-area">

<div style="width: 1300px;height: 710px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:100px;margin-LEFT: -310px;">

<div style="position:relative;width: 1300px;height: 710px;overflow:hidden;top: 0px;left: 0px;">
<div style="left: 0px;position:absolute;top: 0px;">

<div style="z-index: !;width: 1350px; height: 710px; top:0px; left:0px; overflow: hidden;transform:rotate(0deg);background-size: 100% 100%;background-image:url(); text-align: center;">
<metaname="referrer" content="never">
<video frameborder="0" src="" autoplay muted loop="" controls="" style="position:absolute;left: -30px;top: -50px;background:#000 ;width:1400px; height: 760px;>

<div style="color:#f88;font-size:2.5em;margin-left:560px;top:0px;"></div>

<img class=&lazyload bg-gif" src="https://ysj147.s3-us-east-1.ossfiles.com/zzsc/gif/877f.gif"" title="" alt="" style="z-index: 1;POSITION: relative; TOP: -710px;LEFT: 0px; width:1300px; height: 710px; margin: 0px;border-radius:3%background-color: rgb(255, 255, 255); display: block;">

<img class=&lazyload bg-gif" src="https://ysj147.s3-us-east-1.ossfiles.com/zzsc/gif/hei.gif"" title="" alt="" style="z-index: 1;POSITION: relative; TOP: -810px;LEFT: 280px; width:350px; height: 80px; margin: 0px;border-radius:3%background-color: rgb(255, 255, 255); display: block;">

<img class=&lazyload bg-gif" src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" data-original="" title="" alt="" style="z-index: 1;POSITION: relative; TOP: -950px;LEFT:200px;height: 55px; margin: 0px;border-radius:3%background-color: rgb(255, 255, 255); display: block;">

</div>
</style>
</div>

<script>

/* 除以几依据 pin-pu 标签的 width + 希望的间隔值即 margin-right 值 */
let total = Math.ceil(mydiv.offsetWidth / 2);

Array.from({length: total}).forEach((item,key) => {
   item = document.createElement('pin-pu');
   item.style.cssText += `
            background: #${Math.random().toString(16).substr(-6)};
            height: ${Math.random() * mydiv.offsetHeight}px;
            --hh: ${mydiv.offsetHeight / 2 + Math.random() * mydiv.offsetHeight / 2}px;
            --delay: -${Math.random()}s;
   `;
   mydiv.appendChild(item);
});

let node = mydiv;
let clone = node.cloneNode(true);
copydiv.appendChild(clone);

</script>

<style type="text/css">

@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }

body { overflow-x: hidden; }
#baiBox {
   font-size: 26px;
   color: #ff0000;
   position: relative;
   text-align:center;
   transform: translate(0%,35%);
   font-weight: normal;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-image: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#091CFD 62%,#36F4B1 75%);
   background-position: -1200px 0;
   filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
   -webkit-animation:loop 3s linear 1000000;
}

@-webkit-keyframes loop{
0%{background-position: -1200px 0;}
100%{background-position: -0 0;}
}

.tit {
   position: relative;
   width: 700px;
   top: -700px;
   left: -100px;;
   font-family:迷你简细圆;
   font-size: 40px;
   text-shadow: 2px 2px #ff00ff;
   font-weight:bold;
   color:#802A2A;z-index: 10; }
#tit:hover { color: green; }
/*标题位置移动范围设置*/

</style>

<div id="hu" >
<div id="baiBox"
<div class="tit">
<span >《十年网络红歌 (经典篇) 》 CD2</span>
<span > </span></div>

<div style="position: relative;width: 500px;height: 50px;top:-100px;LEFT: 980px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:26px;">亦是金在线音乐</span></span></span></p></div>

</style>

<div style="position: relative; top:-740px;LEFT: 80px;z-index: 12435;">
<style type="text/css">
.lyricDisp{-webkit-text-stroke:1.5px #ffffff;font: bold 2.2em悟空大字库, sans-serif; transition:.3s all ease;font-size:2.2em;}
.lyricDisp:nth-child(1){color:#000080;text-align:left;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}
.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);}
.lyricDisp:nth-child(2){color:blue;text-align:center;font-size:1.6em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
#LRCShow{position:absolute;left:250px;bottom:-40px;width:75%;height:120px;margin:6px auto position:relative;}
#rdisk{position:absolute;left:5px;bottom:0px;border-radius: 50%;font-size:4em;color:red;animation:circleSmall2 6s linear infinite;animation-play-state:paused;cursor:pointer;}
@keyframes circleSmall2{0%{transform:rotateX(0deg) rotateY(20deg) rotateZ(-360deg);}100%{transform:rotateX(0deg) rotateY(20deg) rotate(0deg);}}
#ground3rd{
width:1000px;height:600px;
position:absolute;font-size:16px;
overflow:hidden;border-radius:0px;
margin:5px 0px 30px -5px;
background:url(https://s4.ax1x.com/2022/03/05/bwbPNq.jpg);
background-position:center;
background-size: cover;
   perspective: 1200px;
}

#mpic {
position: absolute;
transform: rotateY(0deg);
top: 0px;
left: 0px;
width: 1000px;
height: 600px;
animation: rote 80s linear infinite;
cursor: pointer;
opacity: 1;
}

@keyframes rote {
from {
background-position: 0 0;
filter: hue-rotate(360deg)
}

to {
background-position: -1730px 300px;
}
}

#mpic1 {
position: absolute;
transform: rotateY(0deg);
top: 0px;
left: 0px;
width: 1000px;
height: 600px;
animation: rotet 100s linear infinite;
cursor: pointer;
opacity: 1;
}

@keyframes rotet {
from {
background-position: 0 0;
filter: hue-rotate(360deg)
}

to {
background-position: 0px -1730px;
}
}

#songList li {
cursor: pointer;
color: #f7a016;
font:thick微软简中圆;
   font-size:18px;
   line-height:28px
}
</style>

<div id="ground3rd">
<div class="itemm">

<div style="width: 1000px;height: 600px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:0px;margin-LEFT: 0px;">
<div style="position:relative;width: 1000px;height: 600px;overflow:hidden;top: 0px;left: 0px;">
<div style="left: 0px;position:absolute;top: 0px;">

</div>
<ol id='songList' style="color:red;position:absolute;top:10px;left:0px;"></ol>
<div id="rdisk"style="width:100px;height:100px;border: 0px solid #000000;
background: url('https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/411g1x.png')"></div>
<div id="LRCShow"></div>
</div>


<textarea style="visibility:hidden;" id='lrcContent0'></textarea>

<script type="text/javascript">
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=document.createElement('div');this.gclines.className='lyricDisp';this.showLrcObj.appendChild(this.gclines)}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.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=lyriclist.lastIndexOf(']');if(tIdx>0)lrcTxt=lyriclist.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push()}this.lrcVec.push()}}}this.lrcVec.sort(function(a,b){return(a-b)})},showLrc:function(durTime){this.gclines.innerHTML=this.gclines.dataset.lrc=this.lrcVec.length>0?this.lrcVec:"\u3000";this.gclines.style.setProperty('--aniName','bgMove'+(this.idx%2));this.gclines.style.setProperty('--durTime',durTime+'ms');this.gclines.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.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.audioCtrl.style.animationPlayState='paused';that.gclines.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){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec-that.lrcVec)*950)}else{that.showLrc((this.duration-that.lrcVec)*950)}if(that.idx+1==that.lrcVec.length){that.gclines.innerHTML=""}else{that.gclines.innerHTML=that.lrcVec}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()}}
</script>

<script type="text/javascript">
(function() {
songParas = [
["《小薇》 - 黄品源","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD2/jd0208.mp3",`《小薇》 - 黄品源
选自：《十年网络红歌 (经典篇)》 CD2
词曲：阿弟
歌词编辑：亦是金
● ● ● ● ● ●
有一个美丽的小女孩
她的名字叫作小薇
她有双温柔的眼睛
她悄悄偷走我的心
小薇啊你可知道我多爱你
我要带你飞到天上去
看那星星多美丽
摘下一颗亲手送给你
● ● ● ● ● ●
有一个美丽的小女孩
她的名字叫作小薇
她有双温柔的眼睛
她悄悄偷走我的心
小薇啊你可知道我多爱你
我要带你飞到天上去
看那星星多美丽
摘下一颗亲手送给你
小薇啊你可知道我多爱你
我要带你飞到天上去
看那星星多美丽
摘下一颗亲手送给你
-- 谢谢欣赏 --`],
["《狼爱上羊》 - 汤潮","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD2/jd0205.mp3",`《狼爱上羊》 - 汤潮
选自：《十年网络红歌 (经典篇)》 CD2
词曲：汤潮
歌词编辑：亦是金
● ● ● ● ● ●
北风呼呼的刮
雪花飘飘洒洒
突然传来了一声枪响
这匹狼他受了重伤
但他侥幸逃脱了
救它的是一只羊
从此它们约定三生
苦诉着衷肠
狼说亲爱的
谢谢你为我疗伤
不管未来有多少的风雨
我都为你去抗
羊说不要客气
谁让我爱上了你
在你身边有多么的危险
我都会陪伴你
就这样他们快乐的流浪
就这样他们为爱歌唱
狼爱上羊啊爱的疯狂
谁让他们真爱了一场
狼爱上羊啊并不荒唐
他们说有爱就有方向
狼爱上羊啊爱的风光
他们穿破世俗的城墙
狼爱上羊啊爱的疯狂
他们相互搀扶去远方
● ● ● ● ● ●
狼说亲爱的
谢谢你为我疗伤
不管未来有多少的风雨
我都为你去抗
羊说不要客气
谁让我爱上了你
在你身边有多么的危险
我都会陪伴你
就这样他们快乐的流浪
就这样他们为爱歌唱
狼爱上羊啊爱的疯狂
谁让他们真爱了一场
狼爱上羊啊并不荒唐
他们说有爱就有方向
狼爱上羊啊爱的风光
他们穿破世俗的城墙
狼爱上羊啊爱的疯狂
他们相互搀扶去远方
-- 谢谢欣赏 --`],
["《黄玫瑰》 - 黄灿","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD2/jd0213.mp3",`《黄玫瑰》 - 黄灿
选自：《十年网络红歌 (经典篇)》 CD2
词曲：黄灿
歌词编辑：亦是金
● ● ● ● ● ●
黄玫瑰别落泪
所有花儿你最美
受了伤别伤悲
别让泪珠湿花蕊
别让我看见你的伤悲
我会为她心碎别问自己对不对
心中有爱就很美
即使告别了春天阳光
你依然要开放别害怕
别犯傻别轻易剪去长发
我会站在你的身旁
给你依靠的肩膀
别说话微笑吧回头是灿烂的霞
我默默的祝福你感觉到了吗
海角天涯哪里不是你的家
别怕啊别傻啊哪里都能开花
● ● ● ● ● ●
黄玫瑰别落泪
所有花儿你最美
受了伤别伤悲
别让泪珠湿花蕊
你应该知道你是那样美
谁都会为你心碎别再抱怨爱太累
真爱能有几回
即使告别了春天阳光
你依然要开放别害怕
别犯傻别轻易剪去长发
我会站在你的身旁
给你依靠的肩膀
别说话微笑吧回头是灿烂的霞
我默默的祝福你感觉到了吗
海角天涯哪里不是你的家
别怕啊别傻啊哪里都能开花
-- 谢谢欣赏 -- `],
["《两只蝴蝶》 - 庞龙","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD2/jd0201.mp3",`请欣赏：《两只蝴蝶》 - 庞龙`],
["《香水有毒》 - 胡杨林","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD2/jd0202.mp3",`请欣赏：《香水有毒》 - 胡杨林`],
["《月亮之上》 - 凤凰传奇","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD2/jd0203.mp3",`请欣赏：《月亮之上》 - 凤凰传奇`],
["《你到底爱谁》 - 刘嘉亮","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD2/jd0204.mp3",`请欣赏：《你到底爱谁》 - 刘嘉亮`],
["《车站》 - 曹磊","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD2/jd0206.mp3",`请欣赏：《车站》 - 曹磊`],
["《十年》 - 陈奕迅","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD2/jd0207.mp3",`请欣赏：《十年》 - 陈奕迅`],
["《童话》 - 光良","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD2/jd0209.mp3",`请欣赏：《童话》 - 光良`],
["《求佛》 - 誓言","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD2/jd0210.mp3",`请欣赏：《求佛》 - 誓言`],
["《太多》 - 陈冠蒲","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD2/jd0211.mp3",`请欣赏：《太多》 - 陈冠蒲`],
["《暗香》 - 沙宝亮","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD2/jd0212.mp3",`请欣赏：《暗香》 - 沙宝亮`],
["《死了都要爱》 - 信乐团","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD2/jd0214.mp3",`请欣赏：《死了都要爱》 - 信乐团`],
["《爱上你是一个错》 - 杨培安","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD2/jd0215.mp3",`请欣赏：《爱上你是一个错》 - 杨培安`],
];

var opts = {
lrcTxtID:'lrcContent0',
lrcShowID:"LRCShow",
audioURL:"https://www.qqmc.com/up/kwlink.php?id=60010502&.mp3",
audioCtrl:'rdisk'
};
var km = null;
var idx = 0;
let songList = document.getElementById('songList');

for(n = 0; n < songParas.length; n++) {
let item = document.createElement('li');
item.id = 's'+n;
item.innerHTML = songParas;

songList.appendChild(item);
}

items = songList.getElementsByTagName('li');

for(n = 0 ; n < items.length; n++) {
items.onclick=function() {
idx = parseInt(this.id.substr(1));
document.getElementById('ground3rd').style.backgroundImage = `url(${songParas})`;
if(km){
km.stopMusic();
//km = null;
km.handleLrc(songParas);
km.setAudioUrl(songParas);
km.reStart();
}
else {
document.getElementById(opts.lrcTxtID).innerHTML = songParas;
opts.audioURL=songParas;
km = new lrcPlayer2(opts);
}
}
}
items.click();

setInterval(() => {
if(km) {
items = songList.getElementsByTagName('li');
if(km.isMusicEnd()) {
idx++; idx %= items.length;
items.click();
}
}
//setTimeout(isSongEnded, 500);
}, 500);

})();
</script>
<DIV style="HEIGHT: 800px">

红影发表于 2023-9-22 12:25

好多好歌啊，又是个好听专辑。感谢亦是金老师好帖{:4_199:}

红影发表于 2023-9-22 12:27

又换了个绿色的花朵播放器按钮呢，背景两个背靠背的人儿也好温馨{:4_187:}

红影发表于 2023-9-22 12:28

那个转动的气球是另加的吧，很烘托气氛{:4_204:}

亦是金 发表于 2023-9-22 12:55

红影发表于 2023-9-22 12:25
好多好歌啊，又是个好听专辑。感谢亦是金老师好帖

问好！{:4_187:}

亦是金 发表于 2023-9-22 12:55

红影发表于 2023-9-22 12:27
又换了个绿色的花朵播放器按钮呢，背景两个背靠背的人儿也好温馨

谢谢欣赏！{:4_187:}

亦是金 发表于 2023-9-22 13:00

本帖最后由亦是金于 2023-9-22 13:02 编辑

红影发表于 2023-9-22 12:28
那个转动的气球是另加的吧，很烘托气氛
背景动画是下载的，我把它翻了个身！气球是原来就有的。原来的动画有一行文字，我贴了一张黑色的狗皮膏药把它覆盖了！{:4_173:}

红影发表于 2023-9-22 13:35

亦是金发表于 2023-9-22 12:55
问好！

问好亦是金老师，下午好{:4_187:}

红影发表于 2023-9-22 13:36

亦是金发表于 2023-9-22 13:00
背景动画是下载的，我把它翻了个身！气球是原来就有的。原来的动画有一行文字，我贴了一张黑色的狗皮膏药 ...

原来是这样，很浑然天成的样子呢，调整得真好{:4_187:}

红影发表于 2023-9-22 13:36

亦是金发表于 2023-9-22 12:55
谢谢欣赏！

不客气啊，谢谢亦是金老师带来的好帖{:4_187:}

亦是金 发表于 2023-9-22 17:20

红影发表于 2023-9-22 13:35
问好亦是金老师，下午好

下午好！{:4_187:}

亦是金 发表于 2023-9-22 17:22

红影发表于 2023-9-22 13:36
原来是这样，很浑然天成的样子呢，调整得真好

我只是瞎搞！胡拼乱凑！{:4_189:}

亦是金 发表于 2023-9-22 17:23

红影发表于 2023-9-22 13:36
不客气啊，谢谢亦是金老师带来的好帖

{:4_204:}

红影发表于 2023-9-22 20:14

亦是金发表于 2023-9-22 17:20
下午好！

明天要去外地，没法来欣赏亦是金老师的歌曲了，等回来了一并欣赏吧{:4_204:}

红影发表于 2023-9-22 20:14

亦是金发表于 2023-9-22 17:22
我只是瞎搞！胡拼乱凑！

能够调到这样完美的境地，很赞的{:4_187:}

红影发表于 2023-9-22 20:14

亦是金发表于 2023-9-22 17:23

问好亦是金老师，晚上好{:4_187:}

亦是金 发表于 2023-9-22 21:08

红影发表于 2023-9-22 20:14
明天要去外地，没法来欣赏亦是金老师的歌曲了，等回来了一并欣赏吧

问好红影！祝办事顺利！等你来听歌！{:4_187:}

亦是金 发表于 2023-9-22 21:09

红影发表于 2023-9-22 20:14
能够调到这样完美的境地，很赞的

谢谢夸奖！{:4_189:}

亦是金 发表于 2023-9-22 21:10

红影发表于 2023-9-22 20:14
问好亦是金老师，晚上好

晚上好！早点休息！{:4_187:}

红影发表于 2023-9-22 22:38

亦是金发表于 2023-9-22 21:08
问好红影！祝办事顺利！等你来听歌！

谢谢亦是金老师祝福{:4_187:}

页: [1] 2

花潮论坛's Archiver

《十年网络红歌 (经典篇) 》 CD2