《十年网络红歌 (经典篇) 》 CD3
本帖最后由 亦是金 于 2023-9-23 19:49 编辑 <br /><br /><div class="cont-area">
<div style="width: 1200px;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: 1200px;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: -80px;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/627f.gif"" title="" alt="" style="z-index: 1;POSITION: relative; TOP: -710px;LEFT: -110px; width:1350px; 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/yanhua02.gif" data-original="" title="" alt="" style="z-index: 1;POSITION: relative; TOP: -1400px;LEFT: 400px; width:450px; height: 200px; margin: 0px;border-radius:3%background-color: rgb(255, 255, 255); display: block; opacity: 1.0;">
<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: -1180px;LEFT:410px;height: 35px; 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 >《十年网络红歌 (经典篇) 》 CD3</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: #ffffff;
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:120px;height:120px;border: 0px solid #000000;
background: url('https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/anniu11xg1.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/CD3/jd0305.mp3",`《隐形的翅膀》 - 张韶涵
选自：《十年网络红歌 (经典篇)》 CD3
词曲:王雅君 | 编曲:陈俊廷
歌词编辑：亦是金
● ● ● ● ● ●
每一次
都在徘徊孤单中坚强
每一次
就算很受伤 也不闪泪光
我知道
我一直有双隐形的翅膀
带我飞 飞过绝望
不去想
他们拥有美丽的太阳
我看见
每天的夕阳 也会有变化
我知道
我一直有双隐形的翅膀
带我飞 给我希望
我终于 看到
所有梦想都开花
追逐的年轻 歌声多嘹亮
我终于 翱翔
用心凝望不害怕
哪里会有风
就飞多远吧
● ● ● ● ● ●
不去想
他们拥有美丽的太阳
我看见
每天的夕阳 也会有变化
我知道
我一直有双隐形的翅膀
带我飞 给我希望
我终于 看到
所有梦想都开花
追逐的年轻
歌声多嘹亮
我终于 翱翔
用心凝望不害怕
哪里会有风
就飞多远吧
隐形的翅膀
让梦恒久比天长
留一个愿望 让自己想象
-- 谢谢欣赏 --`],
["《在心里永远有个你》 - 江智民&周虹","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD3/jd0315.mp3",`《在心里永远有个你》 - 江智民&周虹
选自：《十年网络红歌 (经典篇)》 CD3
作词：高 安 | 作曲：徐嘉良
歌词编辑：亦是金
● ● ● ● ● ●
为什么 我们相遇网络
为什么 要拿虚拟对待我
我和你 在一起
在一起 的甜蜜
这份爱 会埋在我心底
我和你相爱网络里
爱来爱去 都变成回忆
你的心 我最懂
你哭泣 我陪你
这辈子 注定与你在一起
大声喊出我爱你
时刻把你放心底
不怕网络的虚拟 等着你
点击鼠标的情意
传达爱你的蜜语
在心里从此永远有个你
谢谢你 让我遇到你
谢谢你 也让我爱上你
不管 风风 雨雨
不问 明天在哪里
我都会 永远的 陪伴你
● ● ● ● ● ●
为什么 我们相遇网络
为什么 要拿虚拟对待我
我和你 在一起
在一起 的甜蜜
这份爱 会埋在我心底
大声喊出我爱你
时刻把你放心底
不怕网络的虚拟 等着你
点击鼠标的情意
传达爱你的蜜语
在心里从此永远有个你
为什么 我们相遇网络
为什么 要拿虚拟对待我
我和你 在一起
在一起 的甜蜜
这份爱 会埋在我心底
大声喊出我爱你
时刻把你放心底
不怕网络的虚拟 等着你
点击鼠标的情意
传达爱你的蜜语
在心里从此永远有个你
谢谢你 让我遇到你
谢谢你 也让我爱上你
不管 风风 雨雨
不问 明天在哪里
在心里从此永远有个你
-- 谢谢欣赏 --`],
["《因为爱情》 - 陈奕迅&王菲","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD3/jd0302.mp3",`《因为爱情》 - 陈奕迅&王菲
选自：《十年网络红歌 (经典篇)》 CD3
词曲：小 柯
歌词编辑：亦是金
● ● ● ● ● ●
给你一张过去的CD
听听那时我们的爱情
有时会突然忘了
我还在爱著你
再唱不出这样的歌曲
听到都会红著脸躲避
虽然会经常忘了
我依然爱著你
因为爱情 不会轻易悲伤
所以一切都是幸福的模样
因为爱情 简单的生长
依然随时可以为你疯狂
因为爱情 怎麼会有沧桑
所以我们还是年轻的模样
因为爱情 在那个地方
依然还有人在那里游荡
人来人往
● ● ● ● ● ●
再唱不出这样的歌曲
听到都会红著脸躲避
虽然会经常忘了
我依然爱著你
因为爱情 不会轻易悲伤
所以一切都是幸福的模样
因为爱情 简单的生长
依然随时可以为你疯狂
因为爱情 怎麼会有沧桑
所以我们还是年轻的模样
因为爱情 在那个地方
依然还有人在那里游荡
人来人往
给你一张过去的CD
听听那时我们的爱情
有时会突然忘了
我还在爱著你
-- 谢谢欣赏 -- `],
["《风吹麦浪》 - 孙俪&李健","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD3/jd0303.mp3",`请欣赏：《风吹麦浪》 - 孙俪&李健`],
["《该死的温柔》 - 马天宇","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD3/jd0304.mp3",`请欣赏：《该死的温柔》 - 马天宇`],
["《你还要我怎样》 - 薛之谦","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD3/jd0301.mp3",`请欣赏：《你还要我怎样》 - 薛之谦`],
["《卷 珠 帘》 - 霍 尊","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD3/jd0306.mp3",`请欣赏：《卷 珠 帘》 - 霍 尊`],
["《等一分钟》 - 徐誉滕","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD3/jd0307.mp3",`请欣赏：《等一分钟》 - 徐誉滕`],
["《做你的爱人》 -饶天亮","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD3/jd0308.mp3",`请欣赏：《做你的爱人》 -饶天亮`],
["《 火 苗 》 - 格 格","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD3/jd0309.mp3",`请欣赏：《 火 苗 》 - 格 格`],
["《春 天 里》 - 汪 峰","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD3/jd0310.mp3",`请欣赏：《春 天 里》 - 汪 峰`],
["《 犯 错 》 - 斯琴高丽","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD3/jd0311.mp3",`请欣赏：《 犯 错 》 - 斯琴高丽`],
["《倍 儿 爽》 - 大张伟","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD3/jd0312.mp3",`请欣赏：《倍 儿 爽》 - 大张伟`],
["《老人与海》 - 海鸣威","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD3/jd0313.mp3",`请欣赏：《老人与海》 - 海鸣威`],
["《有没有人告诉你》 - 陈楚生","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD3/jd0314.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>
沙发慢慢欣赏！{:4_187:} 前辈动图做的漂亮，还加了3个动图上去{:4_199:} 这个没有歌词同步了，可以省点力了{:4_189:} 没有视频我手机可以直接欣赏的，但现在是电脑，很漂亮的背景{:4_199:} 谢谢精彩分享，制作辛苦了{:4_187:} 焱鑫磊 发表于 2023-9-23 16:08
沙发慢慢欣赏！
问好！谢谢欣赏！{:4_187:} 小辣椒 发表于 2023-9-23 16:54
前辈动图做的漂亮，还加了3个动图上去
问好！谢谢欣赏！{:4_187:} 小辣椒 发表于 2023-9-23 16:54
这个没有歌词同步了，可以省点力了
哈哈哈！偷懒了！{:4_173:} 小辣椒 发表于 2023-9-23 16:58
没有视频我手机可以直接欣赏的，但现在是电脑，很漂亮的背景
谢谢夸奖！{:4_187:} 小辣椒 发表于 2023-9-23 16:58
谢谢精彩分享，制作辛苦了
欢迎有时间来听歌！{:4_204:} 经典红歌，都很好听，欣赏问好老师！{:4_187:} 梦缘 发表于 2023-9-23 19:45
经典红歌，都很好听，欣赏问好老师！
问好！谢谢欣赏！{:4_187:} 小辣椒 发表于 2023-9-23 16:54
这个没有歌词同步了，可以省点力了
刚刚将第一首，第二首，第三首歌曲同步歌词做好更新了！请欣赏！{:4_187:} 亦是金 发表于 2023-9-23 18:44
问好！谢谢欣赏！
不客气的{:4_173:} 亦是金 发表于 2023-9-23 19:55
刚刚将第一首，第二首，第三首歌曲同步歌词做好更新了！请欣赏！
啊~~前辈辛苦了 小辣椒 发表于 2023-9-24 10:52
不客气的
问好！{:4_187:} 小辣椒 发表于 2023-9-24 10:53
啊~~前辈辛苦了
欢迎常来听歌！{:4_187:} 亦是金 发表于 2023-9-24 23:44
问好！
谢谢~~ 亦是金 发表于 2023-9-24 23:45
欢迎常来听歌！
这些歌曲很熟息，以前都分享过的，老歌经典{:4_199:}
页:
[1]
2