《汽车专用极品大碟 12CD》 CD10
<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:20px;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="
https://img.tukuppt.com/video_show/15653652/00/33/17/5fc3600ca28bb.mp4" 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://z3.ax1x.com/2021/08/26/hujGMd.gif" data-original="" title="" alt="" style="z-index: 1;POSITION: relative; TOP: -200px;LEFT:150px;height: 70px; margin: 0px;border-radius:3%background-color: rgb(255, 255, 255); display: block;">
</div>
</style>
</div>
<style>
#wrapper {
position: absolute;
display: flex;
width: fit-content;
height: fit-content;
/* border仅用于观察 */
border: 1px solid red;
}
#mydiv {
position: absolute;
top: -185px;
left: 370px;
width: 500px;
height: 185px;
display: flex;
justify-content: center;
align-items: center;
}
#copydiv { transform: rotateY(-180deg); }
pin-pu {
margin-right: 1px;
width: 1px;
height: 10px;
background: blue;
animation: change .4s var(--delay) infinite alternate linear;
}
@keyframes change {
from { height: 2px; }
to { height: var(--hh); }
}
</style>
<div id="wrapper">
<div id="mydiv"></div>
<div id="copydiv"></div>
</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 >《汽车专用极品大碟 12CD》CD10</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/anniu08.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/qiche/CD10/1001.mp3",`《想 起》 - 女声独唱
词:何启弘 陈耀川 曲:缪森 陈耀川
专辑:汽车专用极品大碟10:绝对经典
歌词编辑:亦是金
● ● ● ● ● ●
回到相遇的地点
在这我对你不了解
以为爱得深就不怕伤悲
偏偏爱人心成雪
我独自走在寂寞的长街
回忆一幕幕重演
我告诉自己勇敢去面对
就算心碎也完美
想起我和你牵手的画面
泪水化成云霞满天
如果我和你还能再见面
就让情意旧梦能圆
我们在不同的世界
想着每一次的误会
好像再一次依偎你身边
偏偏你有千里远
-- 谢谢欣赏 --`],
["《蓝 月 亮》- 女声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD10/1002.mp3",`《蓝 月 亮》- 女声独唱
词曲:龙鲁者 编曲:瓦其依合、安小明
专辑:汽车专用极品大碟10:绝对经典
歌词编辑:亦是金
● ● ● ● ● ●
那凉山的蓝月亮
你又飘进了我梦里
梦里你成了我的新娘
成了我的幸福
你蔚蓝的双眼
隐藏着你的幸福
你飘逸着的黑发
洋溢着你的甜美
你蓝色的温柔
是我一生的守侯
你羞涩的脸庞
是我永远的牵挂
蓝月亮
凉山的蓝月亮
不管幸福要等多久
疼爱的永远是你
蓝月亮
-- 谢谢欣赏 --`],
["《 情 缘 》 - 女声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD10/1003.mp3",`《 情 缘 》 - 女声独唱
专辑:汽车专用极品大碟10:绝对经典
歌词编辑:亦是金
● ● ● ● ● ●
心境常欢乐
紧握情难播
少分相思
多一分拥有
嗡 阿玛 惹尼 这边地耶 梭哈
月儿的圆缺
划出了你我
情缘已过
微风轻吹走
落叶细说愁
从容得自由
平静人享受
-- 谢谢欣赏 --`],
["《菊 花 台》 - 女声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD10/1004.mp3",`《菊 花 台》 - 女声独唱
专辑:汽车专用极品大碟10:绝对经典
歌词编辑:亦是金
● ● ● ● ● ●
你的泪光 柔弱中带伤
惨白的月弯弯 勾住过往
夜太漫长 凝结成了霜
是谁在阁楼上冰冷地绝望
雨轻轻弹 朱红色的窗
我一生在纸上 被风吹乱
梦在远方 化成一缕香
随风飘散 你的模样
菊花残 满地伤
你的笑容已泛黄
花落人断肠 我心事静静淌
北风乱 夜未央
你的影子剪不断
徒留我孤单在湖面 成双
花已向晚 飘落了灿烂
凋谢的世道上 命运不堪
愁莫渡江 秋心拆两半
怕你上不了岸一辈子摇晃
谁的江山 马蹄声狂乱
我一身的戎装 呼啸沧桑
天微微亮 你轻声地叹
一夜惆怅 如此委婉
-- 谢谢欣赏 --`],
["《怕你为自己流泪》 - 女声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD10/1005.mp3",`《怕你为自己流泪》 - 女声独唱
作词 作曲:窦唯
专辑:汽车专用极品大碟10:绝对经典
歌词编辑:亦是金
● ● ● ● ● ●
感觉总会有这么一天
看着你无话可说
太阳的光直射你的脸
难过的深埋我的头
再也不敢直视你的脸
怕你为自己流泪
再也不想让你太疲惫
我知我面临着分手
不用说 Goodbye
让我在黑暗中回味
我的梦从此没有色彩
我会珍重那未来
和你那带不走的圣爱
给我终于说你要回来
盼着你可又想闪躲
一颗心为我为爱归来
可我又如何对你说
脑海是空白
恐惧矛盾的现在
没有权利挽留这份爱
爱依然存在
不愿消失的太快
不要把我关在门外
我的梦从此变成黑白
-- 谢谢欣赏 --`],
["《 野 花 》 - 女声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD10/1006.mp3",`《 野 花 》 - 女声独唱
专辑:汽车专用极品大碟10:绝对经典
歌词编辑:亦是金
● ● ● ● ● ●
山上的野花为谁开又为谁败
静静的等待是否能有人采摘
我就象那花一样在等他到来
拍拍我的肩我就会听你的安排
摇摇摆摆的花呀
她也需要你的抚慰
别让她在等待中老去枯萎
我想问问他知道吗我的心怀
不要让我在不安中试探徘徊
我要为你改变多少才能让你留下来
我在希望中焦急等待你就没有看出来
我想问问他知道不知道我心怀
如果这欲望它真的存在你就别再等待
因为那团火在我心中烧得我实在难耐
让我渴望的坚强的你呀经常出现在夜里
我无法抗拒我无法将你挥去
-- 谢谢欣赏 --`],
["《 自 在 》 - 女声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD10/1007.mp3",`《 自 在 》 - 女声独唱
词曲:彭莉
专辑:汽车专用极品大碟10:绝对经典
歌词编辑:亦是金
● ● ● ● ● ●
走在红尘中
来去太匆匆
过去种种一场梦
今日究竟也是空
观缘起缘灭
唯心所造业
跨越轮回的界线
了悟生死自在现
地雅大嗡揭谛揭谛波罗揭谛
波罗僧揭谛菩提萨婆诃
-- 谢谢欣赏 --`],
["《 神 香 》 - 女声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD10/1008.mp3",`《 神 香 》 - 女声独唱
专辑:汽车专用极品大碟10:绝对经典
歌词编辑:亦是金
● ● ● ● ● ●
林廓的人啊人山人海
弘嘛呢呗呗弘
可我的人儿啊怎么不见了
怎么不见了
玛旁雍措啊波光粼粼
是不是那丢失的人
为我点起的圣灯
林廓的人啊人来人往
冈仁波钦啊云雾茫茫
为我燃起的神香
-- 谢谢欣赏 --`],
["《回到拉萨》 - 女声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD10/1009.mp3",`《回到拉萨》 - 女声独唱
作曲/作词:邓均
专辑:汽车专用极品大碟10:绝对经典
歌词编辑:亦是金
● ● ● ● ● ●
回到拉萨
回到了布达拉
回到了布达拉宫
在雅鲁藏布江把我的心洗清
在雪山之颠把我的魂唤醒
爬过唐古拉山遇见了雪莲花
牵着我的手儿我们回到了她的家
你根本不用担心太多的问题
她会教你如何找到你自己
雪山青草
美丽的喇嘛庙
没完没了的姑娘就没完没了的笑
没完没了的唱我们没完没了的跳
拉呀咿呀咿呀咿呀咿呀咿呀萨
感觉是我的家
我美丽的雪莲花
曾经的天空中飘着一颗曾经的心
不必为明天愁也不必为今天忧
来吧来吧我们一起回拉萨
回到我们阔别已经很久的家
啦耶咿耶~咿耶咿耶耶呀~
来吧来吧来吧来吧来吧来吧来吧来吧来~
呀咿呀咿呀咿呀咿~
-- 谢谢欣赏 --`],
["《想着你 睡不着》 - 女声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD10/1010.mp3",`《想着你 睡不着》 - 女声独唱
专辑:汽车专用极品大碟10:绝对经典
歌词编辑:亦是金
● ● ● ● ● ●
想着你 睡不着
这是爱情的味道
天天见到你
天天睡不着
盼望明天快来到
早早见到你
早早说你好
说好看着月亮一起笑
陪着我 好不好
我的心你是否知道
一起看着月亮一起笑
我们要 一起老
老得不行不行还拥抱
-- 谢谢欣赏 --`],
["《生如夏花》 - 女声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD10/1011.mp3",`正在播放:《生如夏花》 - 女声独唱正在播放:`],
["《怒放的生命》 - 女声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD10/1012.mp3",`正在播放:《怒放的生命》 - 女声独唱`],
["《月亮女儿》 - 女声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD10/1013.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_199:} 播放器按钮又换了一个,还有漂亮的小蝴蝶飞舞,真漂亮{:4_187:} 红影 发表于 2023-9-12 10:22
每天能欣赏到一个音乐专辑,真是美好的享受啊。感谢亦是金老师带来的好帖
问好红影,谢谢欣赏!{:4_187:} 红影 发表于 2023-9-12 10:24
播放器按钮又换了一个,还有漂亮的小蝴蝶飞舞,真漂亮
{:4_205:} 前辈这个背景电脑显示就显得大气而和专辑名称相符,视频背景灵动而且挑选的得当。{:4_199:} 12CD已经做到第10个了,有收藏的价值了{:4_178:} 感谢分享精彩的制作{:4_187:} 亦是金 发表于 2023-9-12 11:01
问好红影,谢谢欣赏!
每天有那么多好歌欣赏,真是福利啊{:4_173:} 小辣椒 发表于 2023-9-12 12:36
前辈这个背景电脑显示就显得大气而和专辑名称相符,视频背景灵动而且挑选的得当。
问好!谢谢夸奖!我爱听!{:4_172:} 亦是金 发表于 2023-9-12 11:04
问好亦是金老师,下午好{:4_187:} 小辣椒 发表于 2023-9-12 12:38
12CD已经做到第10个了,有收藏的价值了
这个系列在一个星期前就制作完成,在每日一贴发表!{:4_189:} 小辣椒 发表于 2023-9-12 12:38
感谢分享精彩的制作
谢谢欣赏!{:4_187:} 亦是金 发表于 2023-9-12 16:53
问好!谢谢夸奖!我爱听!
爱听,继续夸{:4_170:} 亦是金 发表于 2023-9-12 16:57
这个系列在一个星期前就制作完成,在每日一贴发表!
你太厉害了,我是每天匆匆忙忙的赶作业还是没有全部完成的 亦是金 发表于 2023-9-12 16:58
谢谢欣赏!
不客气的{:4_187:} 欣赏好制作,动听的音乐流连忘返{:4_208:} 背景MV加的漂亮{:4_199:}
页:
[1]