人间路过

醉美水芙蓉 发表于 2023-6-3 20:13

本帖最后由醉美水芙蓉于 2023-6-3 20:15 编辑 <br /><br /> <style>
#papa{margin: 10px -300px ; width: 1164px; height: 640px;background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/ba3786fb01373af42952a1c1a9df5f30.mp4.jpg') no-repeat center/cover;box-shadow: 0 0 0px #000;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 1; overflow:hidden;}
#papa::before{ position: absolute;top:0px; left:0px; content: ''; width: 100%; height: 100%; background:url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/03523bc590eab310a39f5575a149b11e_preview.jpg') no-repeat center/cover; transition:2s;z-index: 2;transform:perspective(0px) rotate(180deg)scale(0); }
#papa:hover::before { transform:perspective(0px) rotateX(0deg)scale(1,1);}
.bfq{position: absolute;top:10%; left:90%;}
#mplayer {position: absolute;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 10px 4px;display: grid;place-items: center;color: var(--color);font: normal 4px sans-serif;z-index: 999;--bgColor: linear-gradient(to right, var(--prog) 0%, var(--prog) 0%, var(--track) 0%, var(--track));--ww: 260px;--color:#ffffff;--track: #aaaaaa;--prog: hsl(0,50%,50%);}
#btnplay{--state: paused;z-index: 40;position: absolute;top:-40%; left:40%;width: 40px;height: 40px;background:url(https://pic.imgdb.cn/item/647b268df024cca173175957.gif)no-repeat center/cover;border-radius:0%;animation: spin 6s infinite linear;animation-play-state: var(--state);}

@keyframes spin {0%{transform: rotate(-360deg);}100%{transform: rotate(0deg);}}

#prog {grid-area: prog;-webkit-appearance: none;width: var(--ww); outline: none;background: none;position: relative;}
#prog::-webkit-slider-thumb {-webkit-appearance: none;position: relative;width: 0px;height: 2px;border: 4px solid var(--color);border-radius: 50%;background: var(--prog);top: -3px;cursor: pointer;z-index: 9990;}
#prog::-moz-range-thumb {-webkit-appearance: none;width: 0px;height: 2px;border: 0px solid var(--color);border-radius: 50%;background: var(--prog);cursor: pointer;z-index: 9990;}
#prog::-webkit-slider-runnable-track { height: 2px; border-radius: 0px; background: var(--bgColor); }
#prog::-moz-range-track { height: 6px; border-radius: 10px; background: var(--bgColor); }

#cur { grid-area: cur; color: var(--color); }
#dur { grid-area: dur; color: var(--color); }
#wenz{position: absolute;top:110%; left:20%;font: normal 20px 华文隶书;color:#ffffff;}
#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(0deg, #FFF000,#FFF000));position: absolute;font: normal 55px 华文隶书;color:#FF0000;white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 0px #000000);z-index: 888;}
#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 { from { width: 0;} to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<div id="papa">
<div id="before" ></div>
<div id="testImg" >
<div class="yh">
<divalt="" id="boom1"></div>
<div alt="" id="boom2"></div>
<divalt="" id="boom3"></div>
</div>
</div>
<div id="rotate-words">
<div>人间路过<br />
<span></span></div>
<div>作词：崔伟立<br />
<span>作曲：崔伟立</span></div>
<div>演唱崔伟立<br />
<span>人间路过</span></div>
<div>醉美水芙蓉欢迎你<br />
<span>谢谢光临</span></div>
<div>LRC编辑：醉美水芙蓉<br />
<span>整理：醉美水芙蓉</span></div>
<div><br />
<span></span></div>

</div>
<div id="lrc" data-lrc=""></div>
<div class="bfq"><div id="mplayer"><span id="cur">00:00</span><span id="dur">00:00</span> <span id="btnplay"></span><input type="range" id="prog" step="0" max="100" value="0" /><span id="wenz"> </span></div></div>

</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music277406185.mp3" loop autoplay></audio>

<script >
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',playerCode: ``,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true, mDrag = false;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onmousedown = () =>mDrag =true;prog.onmouseout = () => mDrag = false;prog.onchange = () => { aud.currentTime = aud.duration * prog.value / 100; mDrag = false; };prog.onmousemove = () => prog.style.setProperty('--bgColor', `linear-gradient(to right, var(--prog) 0%, var(--prog) ${prog.value}%, var(--track) ${prog.value}%, var(--track))`);aud.addEventListener('timeupdate', () => {cur.innerText = toMin(aud.currentTime);dur.innerText = toMin(aud.duration);prog.style.setProperty('--bgColor', `linear-gradient(to right, var(--prog) 0%, var(--prog) ${prog.value}%, var(--track) ${prog.value}%, var(--track))`);if(mDrag===false) prog.value = aud.currentTime / aud.duration * 100;for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), btnplay.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state', 'running'), btnplay.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;}};mkPlayer.HCPlayer = playCode;})(this);
(function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 0px solid snow; left: 0px; bottom: 0px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 0px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
let averAdd = 1, offset = 0;
let geci = `崔伟立 - 人间路过 (DJ伟然版)
作词：崔伟立
作曲：崔伟立
LRC编辑：醉美水芙蓉
趟过岁月的长河
跨过青山又几座
东南西北一人不停的漂泊
看过多少的冷漠
听过多少的指责
入了心的人却没有几个
曾经年少太执着
一腔抱负太火热
幻想闯出一片天空海也阔
爱恨情仇那么多
是非恩怨无处躲
繁华落尽后剩一片沉默
我只是人间路过
受尽太多的折磨
生活给我太多艰辛泥泞坎坷
这么多年的拼搏
最后得到了什么
走走停停不过是一个过客
我只是人间路过
受尽世间的蹉跎
惊鸿一场何必计较什么对错
为爱哭过也笑过
人生起起又落落
这个世界请你记得我来过
曾经年少太执着
一腔抱负太火热
幻想闯出一片天空海也阔
爱恨情仇那么多
是非恩怨无处躲
繁华落尽后剩一片沉默
我只是人间路过
受尽太多的折磨
生活给我太多艰辛泥泞坎坷
这么多年的拼搏
最后得到了什么
走走停停不过是一个过客
我只是人间路过
受尽世间的蹉跎
惊鸿一场何必计较什么对错
为爱哭过也笑过
人生起起又落落
这个世界请你记得我来过
我只是人间路过
受尽太多的折磨
生活给我太多艰辛泥泞坎坷
这么多年的拼搏
最后得到了什么
走走停停不过是一个过客
我只是人间路过
受尽世间的蹉跎
惊鸿一场何必计较什么对错
为爱哭过也笑过
人生起起又落落
这个世界请你记得我来过
谢谢欣赏！`;

let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);return(lrcTime(lrcAr));}
HCPlayer({
lrcAr: getLrcAr(geci),
lrc_css: '--bg: linear-gradient(#FFF000,#FFF000); top: 82%;',
player_css: '--ww: 240px; right: 40%; bottom: 2%;',
btn_txt: '\&#100',
});

FS({
pa: papa,
set: 'backgroun: #333; color: snow; border: 0px solid snow; top:5%; left: 5%;font: normal 30px 华文隶书;color:#ffffff;',
});
})();
var image = document.getElementById("testImg"),
button = document.getElementById("mplayer");

if (image.classList && image && button) {
button.onclick = function() {
   if (this.value == '.') {
         image.classList.remove('stop');
      this.value = '*';
   } else {
         image.classList.add('stop');
         this.value = '.';
   }
};
}

</script>

<style type="text/css">
#rotate-words {text-align:center;
position:absolute;z-index: 2;
top: 0px;
left:5%;
padding:20% 0px;
font-size:3em;filter:drop-shadow(#ffffff 1px 1px 0px);
color:#ff0000;
font-family: '华文隶书', sans-serif;
}

#rotate-words span {
display:block;
height:80px;
font-size:.7em;color:#000078;
text-transform:lowercase;
opacity:0.8;
font-family: '华文隶书', sans-serif;
}

#rotate-words div {
position:absolute;
opacity:0;
overflow:hidden;

width:1200px;
line-height:1.2em;
animation: rotate-word 36s linear 2 0s;
}

@keyframes rotate-word {0% {
   opacity: 0;
   transform: translatex(-300%);
}
8% {
   opacity: 1;
   transform: translatex(0%);
}
17% {
   opacity: 1;
   transform: translatex(0%);
}
19% {
   opacity: 0;
   transform: translatex(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#rotate-words div:nth-child(2) { animation-delay: 6s}
#rotate-words div:nth-child(3) { animation-delay: 12s}
#rotate-words div:nth-child(4) { animation-delay: 18s}
#rotate-words div:nth-child(5) { animation-delay: 24s}
#rotate-words div:nth-child(6) { animation-delay: 30s}
</style>

<style>
.yh{top:0px; left:0px;width: 100%; height: 100%;position: absolute; z-index: 2; overflow:hidden;}
.yh #boom1{position: absolute;top:0%; left:0%;background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(18, 81, 241, 0.91) 86%);
opacity: 0;width: 100%;height: 100%;
animation: bloom 2s ease 1.2s infinite;
}
.stop #boom1{animation-play-state: paused;}
.yh #boom2{width: 100%;height: 100%;background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(18, 81, 241, 0.91) 86%);
position: absolute;top:0%; left:0%;
animation: bloom 2s ease 1.5s infinite;
}
.stop #boom2{animation-play-state: paused;}
.yh #boom3{width: 100%;height: 100%;background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(18, 81, 241, 0.91) 86%);
position: absolute;top:0%; left:0%;
animation: bloom 3s ease 1.4s infinite;
}
.stop #boom3{animation-play-state: paused;}
@keyframes bloom{
0% {opacity: 0;
   transform: scale(1);
}
100% {
opacity: 1;
   transform: scale(1);filter:hue-rotate(360deg)
}
}
</style>

梦缘发表于 2023-6-3 20:47

老师的帖好看好听，欣赏点赞！{:4_204:}

醉美水芙蓉 发表于 2023-6-3 21:00

梦缘发表于 2023-6-3 20:47
老师的帖好看好听，欣赏点赞！

谢谢梦缘老师支持！

红影发表于 2023-6-3 21:12

漂亮的制作。欣赏水芙蓉好帖{:4_204:}

南无月 发表于 2023-6-3 21:34

哇背景怎么整得一闪一闪有节奏的变色~~
暂停后鼠标移到背景图片上，会有转动的另一张图片出现。。
效果多多，美了美了。。{:4_187:}

醉美水芙蓉 发表于 2023-6-3 21:36

红影发表于 2023-6-3 21:12
漂亮的制作。欣赏水芙蓉好帖

红影美女晚上好！

醉美水芙蓉 发表于 2023-6-3 21:37

南无月发表于 2023-6-3 21:34
哇背景怎么整得一闪一闪有节奏的变色~~
暂停后鼠标移到背景图片上，会有转动的另一张图片出现。。
效果多 ...

谢谢月儿欣赏支持！

红影发表于 2023-6-3 22:44

醉美水芙蓉发表于 2023-6-3 21:36
红影美女晚上好！

问好水芙蓉美女，晚上好{:4_187:}

页: [1]

花潮论坛's Archiver

人间路过