《汽车专用极品大碟 12CD》CD6
<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:20px;margin-LEFT: -310px;">
<style type="text/css">
#papa {
margin: auto;
top: -60px;
left: 0px;
width: 1200px;
height: 800px;
background: lightblue url('');
box-shadow: 3px 3px 20px #000;
position: relative;
display: grid;
place-items: center;
z-index: 1;
}
#papa::after {
position: absolute;
content: '';
top: 580px;
left: 65px;
width: 180px;
height: 180px;
background: url('https://638183.freep.cn/638183/t23/1/heart_133236768103332344.png') 0 0 no-repeat;
background-size: 2900%;
animation: chgBg steps(28) 2s infinite both;
animation-play-state: var(--state);
}
@keyframes chgBg {
0% { background-position: 0%; }
100% { background-position: 100%; }
}
.ship { position: absolute; width: 1400px; height: 860px;top: 0px;left: 0px;}
</style>
<div id="papa">
<video autoplay="autoplay" class="ship" loop="loop" muted="muted" src="https://img.tukuppt.com/video_show/2421007/00/01/33/5b4063d58e15e.mp4"> </video>
</div>
<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:-790px;LEFT: -360px;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:28px;">《汽车专用极品大碟 12CD》</span>
<span style="color:#3d46f7;"><span style="font-size:22px;"> -CD6</span></div>
<div style="position: relative;width: 500px;height: 50px;top:-185px;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>
<div style="position: relative; top:-800px;LEFT: 60px;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.8em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
#LRCShow{position:absolute;left:300px;bottom:20px;width:75%;height:120px;margin:6px auto position:relative;<!--歌词位置-->}
#rdisk{position:absolute;left:50px;bottom:23px;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:19px;
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:0px;left:0px;"><!--歌曲菜单位置--></ol>
<div id="rdisk"style="width:100px;height:100px;border: 0px solid #000000;
background: url('')0 0/100% 100%,conic-gradient();
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://ysj147.s3-us-east-1.ossfiles.com/qiche/CD06/0610.mp3",`《寻找幸福》 - 女声独唱
词/曲：覃元隆
专辑：汽车专用极品大碟6：伤感情歌
歌词编辑：亦是金
● ● ● ● ● ●
那阵风 迷了路 停下脚步
那场雨 淋湿了 心底深处
这些年 谁依然 承受孤独
默默的 等待着 相守的幸福
我的手 曾被你 紧紧牵着
我的心 从那时 为你锁住
这生中 谁能让 岁月停留
只希望 能和你 风雨共度
让爱再继续 真心的相守
我会全心付出
与你的相遇 用一生感悟
爱的归宿
乌拉拉 乌拉拉 乌拉拉拉
乌拉拉 乌拉拉 乌拉拉拉拉
让爱再继续 把手再牵起
不再擦肩而过
这样的风雨 停不下脚步
寻找幸福
-- 谢谢欣赏 --`],
["《自己心情自己感受》 - 女声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD06/0601.mp3",`《自己心情自己感受》 - 女声独唱
曲:虹 词:曲佑良
专辑：汽车专用极品大碟6：伤感情歌
歌词编辑：亦是金
● ● ● ● ● ●
曾有太多不懂
袭击着我
总有些许冷漠
凝聚眼眸
曾有太多哀愁
不避开我
总有些许孤独
涌上心头
这世界 已不是我所能了解的生活
生活 也不再有我能预知的结果
为何 我要接受宿命的悲剧传说
是不是
我也可以
有所选择
三十年的沧桑
我经历太多
自己的心情我自己感受
啊～ 啊～ 啊～
-- 谢谢欣赏 --`],
["《我真的受伤了》- 女声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD06/0602.mp3",`《我真的受伤了》- 女声独唱
词曲：王菀之
专辑：汽车专用极品大碟6：伤感情歌
歌词编辑：亦是金
● ● ● ● ● ●
灯光也暗了
音乐低声了
口中的棉花糖也融化了
窗外阴天了
人是无聊了
我的心开始想你了
电话响起了
你要说话了
还以为你心里对我又想念了
怎么你声音变得冷淡了
是你变了
灯光熄灭了
音乐静止了
滴下的眼泪已停不住了
天下起雨了
人是不快乐
我的心真的受伤了
-- 谢谢欣赏 --`],
["《爱情没有那么美》 - 男声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD06/0603.mp3",`《爱情没有那么美》 - 男声独唱
词曲：陈进兴
专辑：汽车专用极品大碟6：伤感情歌
歌词编辑：亦是金
● ● ● ● ● ●
为什么要喝醉
明知道你不会为我心碎
为什么掉眼泪
明知道男人就这么一点珍贵
是不是活该自己学不会
学会同情 一个男人没人陪
哦～
我听不到我需要的安慰
我只能看着黑暗无言以对
哦 爱情没有那么美
都是我自己不对
你只会说你害怕他对你误会
哎～
我渐渐变得无所谓
I love youI love you
只消能为你受一点罪
-- 谢谢欣赏 --`],
["《 夜 》 - 女声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD06/0604.mp3",`《 夜 》 - 女声独唱
专辑：汽车专用极品大碟6：伤感情歌
歌词编辑：亦是金
● ● ● ● ● ●
夜已经深了
雨已经停了
这城市慢慢晴了
我感觉有点冷了
你已经走了
爱已经输了
那些花开始谢了
我的心感觉累了
你是否睡了
灯已经熄了
我还在等着啊
等到一切都过去了
窗外还是黑色的
什么时候天就会亮
我不知怎么哭了
啊～ 啊～ 啊～
-- 谢谢欣赏 --`],
["《所有的伤痛让我一个人来背》 - 男声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD06/0605.mp3",`《所有的伤痛让我一个人来背》 - 男声独唱
作词/作曲：曹磊
专辑：汽车专用极品大碟6：伤感情歌
歌词编辑：亦是金
● ● ● ● ● ●
思念一次 伤又多一次
袭击着我的心情
深爱着你 无法忘记
失去了你 苦痛难离
回想过去 和你的往事
迷乱了我的情绪
你离我而去 不留痕迹
整个世界开始清醒
爱你不是罪 爱你太沉醉
付出的真心最后却受到责备
爱你不是罪 爱你太劳累
所有的伤痛只让我一个人来背
一个人来背
-- 谢谢欣赏 --`],
["《爱我就别伤害我》 - 女声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD06/0606.mp3",`《爱我就别伤害我》 - 女声独唱
专辑：汽车专用极品大碟6：伤感情歌
歌词编辑：亦是金
● ● ● ● ● ●
走在冷冷的大街
天空突然下起了大雪
好想和你见面
可你何时出现
我在爱的边缘
想起和你分手的那天
泪水一点一点
一遍一遍
我们的爱情
就像风筝断了线
感情的世界我无法改变
泪水留在天亮以前
如果你爱我就别伤害我
这不是我犯下的错
这不是我想要的结果
你爱我就别伤害我
-- 谢谢欣赏 --`],
["《在你面前好想流泪》 - 男声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD06/0607.mp3",`《在你面前好想流泪》 - 男声独唱
作词：项丹作曲：郭峰
专辑：汽车专用极品大碟6：伤感情歌
歌词编辑：亦是金
● ● ● ● ● ●
看过太多太多的虚伪
看破太多太多的谎言
以为自己不会再轻信
为何又坚信你分担我伤悲
你轻轻说 别为昨天后悔
这一刻我 泪落纷飞
在你面前我好想流泪
我的心被你揉碎
告诉我沧桑后还有的滋味
听过太多太多的赞美
听过太多太多的诋毁
以为自己不在乎毁誉
为何不敢忘记自己是谁
你轻轻说 别过得太累
那一刻我 泪落纷飞
想过太多太多的机会
经过太多太多的疲惫
以为自己不会再有激情
为何又沉醉你柔情的安慰
你轻轻说 剩下的太可贵
-- 谢谢欣赏 --`],
["《扫落叶的人》 - 女声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD06/0608.mp3",`《扫落叶的人》 - 女声独唱
作词：老沫作曲：沙宝亮
专辑：汽车专用极品大碟6：伤感情歌
歌词编辑：亦是金
● ● ● ● ● ●
无情的岁月 想阻止那善良的老人
现代的都市 留不住他匆匆的身影
你关心过那些无依无靠的老人吗
这世界需要的不再是沉默是回应
那孤独的老人
那伤心的过客
谁在乎过 告诉我
孩子的哭声 唤不醒那沉睡的心灵
现在的人们 已被欲望迷住了眼睛
谁关心过那些无依无靠的老人啊
这世界也不曾改变它一贯的冰冷
有谁真的在乎过他的梦
那个扫落叶的人
那个扫落叶的老人
打扫着街上的落叶
却扫不尽心中的灰尘
-- 谢谢欣赏 --`],
["《爱我别走》 - 女声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD06/0609.mp3",`《爱我别走》 - 女声独唱
专辑：汽车专用极品大碟6：伤感情歌
歌词编辑：亦是金
● ● ● ● ● ●
我到了这个时候还是一样
夜里的寂寞容易叫人悲伤
我不敢想的太多
因为我一个人
迎面而来的月光拉长身影
漫无目地的走在冷冷的街
我没有你的消息
因为我在想你
爱我 别走
如果 你说
你不爱我
不要听见你真的说出口
再给我 一点温柔
-- 谢谢欣赏 --`],
["《男人不该让女人流泪》 - 女声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD06/0611.mp3",`正在播放：《男人不该让女人流泪》 - 女声独唱`],
["《孤单的等候》 - 男声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD06/0612.mp3",`正在播放：《孤单的等候》 - 男声独唱`],
["《为什么你背着我爱别人》 - 女声独唱","","https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD06/0613.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>
<style>
#wrapper {
position: absolute;
display: flex;
width: fit-content;
height: fit-content;
/* border仅用于观察 */
border: 1px solid red;
}
#mydiv {
position: absolute;
top: -100px;
left: 330px;
width: 500px;
height: 85px;
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>
问好前辈，歌曲可以听到，背景视频我手机看不见，晚上回家电脑看 谢谢分享又一个专辑，太辛苦了 小辣椒 发表于 2023-9-8 18:49
问好前辈，歌曲可以听到，背景视频我手机看不见，晚上回家电脑看
问好！{:4_187:} 小辣椒 发表于 2023-9-8 18:49
谢谢分享又一个专辑，太辛苦了
谢谢支持！谢谢欣赏！{:4_187:} 这颗心的按钮记得是蒙太奇的连续画呢{:4_173:} 有时这么多好歌，很多没听过呢。感谢亦是金老师的精美好帖{:4_199:} 红影 发表于 2023-9-8 20:04
这颗心的按钮记得是蒙太奇的连续画呢
问好红影！{:4_187:}谢谢马黑黑老师提供红心按钮代码！{:4_176:} 红影 发表于 2023-9-8 20:05
有时这么多好歌，很多没听过呢。感谢亦是金老师的精美好帖
谢谢欣赏！{:4_187:} 亦是金 发表于 2023-9-8 20:54
问好红影！谢谢马黑黑老师提供红心按钮代码！
呵呵，被你用出来这个心的效果，忽然想起那个蒙太奇的事了。
亦是金 发表于 2023-9-8 20:55
谢谢欣赏！
这个视频好玩，到后面看到镜头里车子偏到路边上去了{:4_173:}
页:
[1]