《葫芦丝月光下的凤尾竹 3》-新时代乐队

亦是金 发表于 2023-3-14 21:26

本帖最后由亦是金于 2023-3-15 11:06 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1846164">

<div class="cont-area">

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

<style>
#papa {

width: 1200px;
height: 700px;
background: url('https://www.kumeiwp.com/sub/filestores/2023/03/14/2e776d0c0e80e5243138956a0427b05e.gif') no-repeat 0 center/cover;
box-shadow: 3px 3px 0px #000;
transition: all 1.2s;
cursor: pointer;
position: relative;
z-index: 1;
}

#papa:hover {
background: url('https://s1.ax1x.com/2023/03/08/ppmi6JK.jpg') no-repeat center/cover;
}

</style>

<div id="papa">

</div>

<script>
papa.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>

<style type="text/css">

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

body { overflow-x: hidden; }
#baiBox {
   margin: auto;
   width: 800px;
   text-align: center;
   font-family:微软简中圆;
   font-size: 2.5rem;
   font-weight: bold;
   color: #f46ff6;
   transform-origin: top;
   animation: yao 1.0s linear infinite alternate;
}

@keyframes yao {
   from{transform: perspective(800px) rotatex(30deg); }
   to { transform: perspective(800px) rotatex(-30deg); }
}

.tit { position: relative;width: 300px;height: 30px;top:-690px;LEFT: -380px;z-index: 100;filter: drop-shadow(-1px 1px 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) }
#tit:hover { color: green; }
/*标题位置移动范围设置*/

</style>

<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:22px;">《葫芦丝月光下的凤尾竹 3》</span>
<span style="color:#3d46f7;"><span style="font-size:14px;"> - 新时代乐队</span></div>

<div style="position: relative;width: 500px;height: 50px;top:-80px;LEFT: 972px;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>

<style>
#canv { position: relative; top: -800px; left: 440px; opacity: .25; mix-blend-mode: screen;}
</style>

<body>

<div id="papa">
   <span id="disc"></span>

   <canvas id="canv" width="600" height="150" ></canvas>
</div>

<script>
let ctx = canv.getContext('2d');
let w = canv.width,
   h = canv.height,
   tick = 0,
   particles = [];
let opts = {
   baseBaseSize: 10,
   addedBaseSize: 5,
   baseVel: 2,
   addedVel: 1,
   baseTime: 60,
   addedTime: 20,
   overTime: 5,
   sliding: .99,
   particleChance: .9,
   particles: 100,
   templateParticleColor: 'hsla(hue,80%,50%,alp)',
   repaintAlpha: 'rgba(0,0,0,.1)',
   startColor: .2,
   fullColor: .5,
   stopColor: .6,
   timeToColorChange: 3
};

function Particle() {
   this.reset();
}
Particle.prototype.reset = function() {
   this.x = Math.pow(Math.random(), 1 / 4);
   this.y = h / 2;
   var color = opts.templateParticleColor.replace('hue', this.x * 360 * 2 + tick * opts.timeToColorChange);
   this.baseSize = (Math.random() + this.x) / 2 * (opts.baseBaseSize + opts.addedBaseSize * Math.random());
   this.gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, this.baseSize / 2);
   this.gradient.addColorStop(opts.startColor, color.replace('alp', 0));
   this.gradient.addColorStop(opts.fullColor, color.replace('alp', 1));
   this.gradient.addColorStop(opts.stopColor, color.replace('alp', 1));
   this.gradient.addColorStop(1, color.replace('alp', 0));
   this.vx = -(1 + Math.random() / 10 - this.x) * (opts.baseVel + Math.random() * opts.addedVel);
   this.vy = Math.pow(this.x, 4) * (opts.baseVel + Math.random() * opts.addedVel) * (Math.random() < .5 ? -1 : 1);
   this.x *= w / 2;
   if (Math.random() < .5) {
            this.x = w - this.x;
            this.vx *= -1;
   }
   this.time = opts.baseTime + opts.addedTime * Math.random();
   this.tick = this.time + opts.overTime;
};
Particle.prototype.step = function() {
   var size;
   if (this.tick <= this.time) {
            this.x += this.vx *= opts.sliding;
            this.y += this.vy *= opts.sliding;
            size = Math.pow(this.tick / this.time, 1 / 2)
   } else size = 1 - ((this.tick - this.time) / opts.overTime) + .000001;
   --this.tick;
   ctx.translate(this.x, this.y);
   ctx.scale(size, size);
   ctx.fillStyle = this.gradient;
   ctx.fillRect(-this.baseSize / 2, -this.baseSize / 2, this.baseSize, this.baseSize);
   ctx.scale(1 / size, 1 / size);
   ctx.translate(-this.x, -this.y);
   if (this.tick <= 0) this.reset();
};
(function anim() {
   window.requestAnimationFrame(anim);
   ctx.globalCompositeOperation = 'source-over';
   ctx.fillStyle = opts.repaintAlpha;
   ctx.fillRect(0, 0, w, h);
   ctx.globalCompositeOperation = 'lighter';
   ++tick;
   if (particles.length < opts.particles && Math.random() < opts.particleChance) particles.push(new Particle);
   particles.map(function(particle) {
            particle.step();
   });
})();
</script>

<div style="position: relative; top:-1450px;LEFT: 60px;z-index: 12435;">
<style type="text/css">
.lyricDisp{-webkit-text-stroke:1.5px #ffffff;font: bold 2.0em悟空大字库, sans-serif; transition:.3s all ease;font-size:1.8em;}
.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.8em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
#LRCShow{position:absolute;left:380px;bottom:480px;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:17px;
   line-height:27px
}
</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:40px;left:0px;"></ol>
<div id="rdisk"style="width:100px;height:100px;border: 0px solid #000000;
background: url('https://s1.ax1x.com/2023/02/28/ppCT07F.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);
mask: radial-gradient(transparent 7px,#red 0);transform: rotateX(45deg) rotateY(20deg) rotate(0deg);"></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://music.163.com/song/media/outer/url?id=2020776649.mp3",`正播放：《太阳出来喜洋洋》 - 新时代乐队`],
["《再回到从前》 - 新时代乐队","","https://music.163.com/song/media/outer/url?id=2020776648.mp3",`正播放：《再回到从前》 - 新时代乐队`],
["《其实你不懂我的心》 - 新时代乐队","","https://music.163.com/song/media/outer/url?id=2020775729.mp3",`正播放：《其实你不懂我的心》 - 新时代乐队`],
["《又见炊烟》 - 新时代乐队","","https://music.163.com/song/media/outer/url?id=2020775730.mp3",`正播放：《又见炊烟》 - 新时代乐队`],
["《北国之春》 - 新时代乐队","","https://music.163.com/song/media/outer/url?id=2020775731.mp3",`正播放：《北国之春》 - 新时代乐队`],
["《甜蜜蜜》 - 新时代乐队","","https://music.163.com/song/media/outer/url?id=2020775732.mp3",`正播放：《甜蜜蜜》 - 新时代乐队`],
["《小城故事》 - 新时代乐队","","https://music.163.com/song/media/outer/url?id=2020775733.mp3",`正播放：《小城故事》 - 新时代乐队`],
["《在水一方》 - 新时代乐队","","https://music.163.com/song/media/outer/url?id=2020776650.mp3",`正播放：《在水一方》 - 新时代乐队`],
["《军港之夜》 - 新时代乐队","","https://music.163.com/song/media/outer/url?id=2020775734.mp3",`正播放：《军港之夜》 - 新时代乐队`],
["《星星索》 - 新时代乐队","","https://music.163.com/song/media/outer/url?id=2020775735.mp3",`正播放：《星星索》 - 新时代乐队`],
["《采茶舞曲》 - 新时代乐队","","https://music.163.com/song/media/outer/url?id=2020775736.mp3",`正播放：《采茶舞曲》 - 新时代乐队`],
["《情深意长》 - 新时代乐队","","https://music.163.com/song/media/outer/url?id=2020776651.mp3",`正播放：《情深意长》 - 新时代乐队`],
["《愁啊愁》 - 新时代乐队","","https://music.163.com/song/media/outer/url?id=2020775737.mp3",`正播放：《愁啊愁》 - 新时代乐队`],
["《奈何》 - 新时代乐队","","https://music.163.com/song/media/outer/url?id=2020775738.mp3",`正播放：《奈何》 - 新时代乐队`],
["《望春风》 - 新时代乐队","","https://music.163.com/song/media/outer/url?id=2020776652.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>

</TD></TR></TBODY></TABLE>

<DIV style="HEIGHT: 100px">

马黑黑 发表于 2023-3-14 21:40

好专辑

焱鑫磊 发表于 2023-3-14 21:42

欣赏佳作！{:4_176:}

亦是金 发表于 2023-3-14 21:50

马黑黑发表于 2023-3-14 21:40
好专辑

问好黑总！谢谢欣赏！{:4_191:}

亦是金 发表于 2023-3-14 21:51

焱鑫磊发表于 2023-3-14 21:42
欣赏佳作！

问好焱鑫磊，谢谢欣赏！{:4_187:}

马黑黑 发表于 2023-3-14 22:04

亦是金发表于 2023-3-14 21:50
问好黑总！谢谢欣赏！

{:4_191:}

亦是金 发表于 2023-3-14 23:10

马黑黑发表于 2023-3-14 22:04

谢谢！{:4_176:}

庶民发表于 2023-3-15 06:48

多么优美的作品，多么动听的歌声！

亦是金 发表于 2023-3-15 09:14

庶民发表于 2023-3-15 06:48
多么优美的作品，多么动听的歌声！

问好庶民朋友！谢谢欣赏点赞！{:4_191:}

红影发表于 2023-3-15 12:15

碧波荡漾的环境，真清凉。在这样美好的环境里欣赏乐曲真是最好的享受。欣赏亦是金老师好帖{:4_187:}

小辣椒 发表于 2023-3-15 12:20

这么多歌曲，制作辛苦的{:4_187:}

小辣椒 发表于 2023-3-15 12:21

代码发帖比录屏清晰多了，欣赏前辈的精彩制作{:4_178:}

小辣椒 发表于 2023-3-15 12:24

看看代码里面不止一张图片，但我就看见一个背景图片

大猫咪 发表于 2023-3-15 17:18

都是好听的旋律！制作真棒，欣赏学习，谢谢朋友好帖！

{:4_204:}{:4_199:}

亦是金 发表于 2023-3-15 17:20

红影发表于 2023-3-15 12:15
碧波荡漾的环境，真清凉。在这样美好的环境里欣赏乐曲真是最好的享受。欣赏亦是金老师好帖

问好红影！谢谢欣赏点赞{:4_187:}！

亦是金 发表于 2023-3-15 17:27

小辣椒发表于 2023-3-15 12:24
看看代码里面不止一张图片，但我就看见一个背景图片

问好小辣椒！背景里的梦幻六角，水波，美女等动画都集中在2e776d0c0e80e5243138956a0427b05e.gif的动画中的。谢谢你的欣赏点评！{:4_187:}

亦是金 发表于 2023-3-15 17:28

小辣椒发表于 2023-3-15 12:20
这么多歌曲，制作辛苦的

祝你欣赏愉快！{:4_187:}

亦是金 发表于 2023-3-15 17:29

小辣椒发表于 2023-3-15 12:21
代码发帖比录屏清晰多了，欣赏前辈的精彩制作

谢谢夸奖！{:4_185:}

亦是金 发表于 2023-3-15 17:30

大猫咪发表于 2023-3-15 17:18
都是好听的旋律！制作真棒，欣赏学习，谢谢朋友好帖！

问好大猫咪！祝你欣赏愉快！{:4_187:}

红影发表于 2023-3-15 19:37

亦是金发表于 2023-3-15 17:20
问好红影！谢谢欣赏点赞！

这个制作太美了，亦是金老师好构思{:4_187:}

页: [1]

花潮论坛's Archiver

《葫芦丝 月光下的凤尾竹 3》-新时代乐队

《葫芦丝月光下的凤尾竹 3》-新时代乐队