亦是金 发表于 2023-9-20 13:41

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

<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: 120px;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/846f.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://z3.ax1x.com/2021/08/26/hujGMd.gif" data-original="" title="" alt="" style="z-index: 1;POSITION: relative; TOP: -870px;LEFT:370px;height: 45px; 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 >《十年网络红歌 (经典篇) 》 CD1</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: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/CD1/jd0106.mp3",`《 白 狐 》 - 陈 瑞
选自:《十年网络红歌 (经典篇)》 CD1
作词:孙红莺 | 作曲:李旭辉
歌词编辑:亦是金
● ● ● ● ● ●
我是一只爱了千年的狐
千年爱恋 千年孤独
长夜里你可知我的红妆为谁补
红尘中你可知我的秀发为谁梳
我是一只守侯千年的狐
千年守侯 千年无助
情到深处看我用美丽为你起舞
爱到痛时听我用歌声为你倾诉
寒窗苦读 你我海誓山盟铭心刻骨
金榜花烛 却是天涯漫漫陌路殊途
能不能让我为爱哭一哭
我还是千百年前爱你的白狐
多少春去春来 朝朝暮暮
生生世世都是你的狐
能不能让我为爱哭一哭
我还是千百年来不变的白狐
多少春去春来 朝朝暮暮
来生来世还做你的狐
● ● ● ● ● ●
我是一只守侯千年的狐
千年守侯 千年无助
情到深处看我用美丽为你起舞
爱到痛时听我用歌声为你倾诉
寒窗苦读 你我海誓山盟铭心刻骨
金榜花烛 却是天涯漫漫陌路殊途
能不能让我为爱哭一哭
我还是千百年前爱你的白狐
多少春去春来 朝朝暮暮
生生世世都是你的狐
能不能让我为爱哭一哭
我还是千百年来不变的白狐
多少春去春来 朝朝暮暮
来生来世还做你的狐
多少春去春来 朝朝暮暮
来生来世还做你的狐
-- 谢谢欣赏 --`],
["《等你等了那么久》 - 祁 隆","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD1/jd0101.mp3",`请欣赏:《等你等了那么久》 - 祁 隆`],
["《看透爱情看透你》 - 冷 漠","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD1/jd0102.mp3",`请欣赏:《看透爱情看透你》 - 冷 漠`],
["《红尘情歌》 - 高安&黑鸭子","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD1/jd0103.mp3",`请欣赏:《红尘情歌》 - 高安&黑鸭子`],
["《缘分惹的祸》 - 安东阳","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD1/jd0104.mp3",`请欣赏:《缘分惹的祸》 - 安东阳`],
["《 滴 答 》 - 侃 侃","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD1/jd0105.mp3",`请欣赏:《 滴 答 》 - 侃 侃`],
["《 预 谋 》 - 许佳慧","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD1/jd0107.mp3",`请欣赏:《 预 谋 》 - 许佳慧`],
["《十 一 年》 - 邱永传","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD1/jd0108.mp3",`请欣赏:《十 一 年》 - 邱永传`],
["《伤 不 起》 - 王 麟","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD1/jd0109.mp3",`请欣赏:《伤 不 起》 - 王 麟`],
["《爱情买卖》 - 慕容晓晓","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD1/jd0110.mp3",`《爱情买卖》 - 慕容晓晓
选自:《十年网络红歌 (经典篇)》 CD1
作词:何 欣| 作曲:周洪涛
歌词编辑:亦是金
● ● ● ● ● ●
出卖我的爱 逼着我离开
最后知道真相的我眼泪掉下来
出卖我的爱 你背了良心债
就算付出再多感情也再买不回来
当初是你要分开 分开就分开
现在又要用真爱把我哄回来
爱情不是你想卖 想买就能卖
让我挣开 让我明白 放手你的爱
说唱:出卖你的爱 逼着你离开
看到痛苦的你我的眼泪也掉下来
出卖你的爱 我背了良心债
就算付出再多感情也再买不回来
虽然当初是我要分开 后来才明白
现在我用我的真爱希望把你哄回来
我明白是我错了 爱情像你说的
它不是买卖就算千金来买都不卖
● ● ● ● ● ●
出卖我的爱 逼着我离开
最后知道真相的我眼泪掉下来
出卖我的爱 你背了良心债
就算付出再多感情也再买不回来
当初是你要分开 分开就分开
现在又要用真爱把我哄回来
爱情不是你想卖 想买就能卖
让我挣开 让我明白 放手你的爱
狠心把我来伤害 爱这么意外
用心浇灌的真爱 枯萎才明白
爱情不是你想卖 想买就能卖
让我看透 痴心的人 不配有真爱
当初是你要分开 分开就分开
现在又要用真爱把我哄回来
爱情不是你想卖 想买就能卖
让我挣开 让我明白 放手你的爱
-- 谢谢欣赏 --`],
["《最后一个情人》 - 赵 真","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD1/jd0111.mp3",`请欣赏:《最后一个情人》 - 赵 真`],
["《爱情这杯酒谁喝都得醉》 - 闫 旭","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD1/jd0112.mp3",`请欣赏:《爱情这杯酒谁喝都得醉》 - 闫 旭`],
["《不要在我寂寞的时候说爱我》 - t.r.y","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD1/jd0113.mp3",`请欣赏:《不要在我寂寞的时候说爱我》 - t.r.y`],
["《被伤过的心还可以爱谁》 - 六 哲","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD1/jd0114.mp3",`请欣赏:《被伤过的心还可以爱谁》 - 六 哲`],
["《一个人的寂寞两个人的错》 - 贺一航","","https://ysj147.s3-us-east-1.ossfiles.com/10nwanglouhongge/jingdian/CD1/jd0115.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>

红影 发表于 2023-9-20 17:36

又是这么多好歌,好听。背景制作也漂亮,欣赏亦是金老师好帖{:4_199:}

红影 发表于 2023-9-20 17:36

这里又好几首歌曲很熟悉呢,听着熟悉的歌儿,真开心{:4_187:}

亦是金 发表于 2023-9-20 21:36

红影 发表于 2023-9-20 17:36
又是这么多好歌,好听。背景制作也漂亮,欣赏亦是金老师好帖

问好红影!{:4_187:}

亦是金 发表于 2023-9-20 21:36

红影 发表于 2023-9-20 17:36
这里又好几首歌曲很熟悉呢,听着熟悉的歌儿,真开心

欢迎常来听歌!{:4_187:}

红影 发表于 2023-9-20 21:38

亦是金 发表于 2023-9-20 21:36
问好红影!

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

红影 发表于 2023-9-20 21:39

亦是金 发表于 2023-9-20 21:36
欢迎常来听歌!

好多喜欢的歌呢,肯定会常来听的{:4_173:}

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

问好红影!{:4_187:}
页: [1]
查看完整版本: 《十年网络红歌 (经典篇) 》 CD1