《走在人世间》风语
本帖最后由 焱鑫磊 于 2023-6-28 11:25 编辑 <br /><br /><style>#papa{margin: 100px -280px ; width: 1164px; height: 640px;background: url('https://s1.ax1x.com/2023/06/13/pCmICsf.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://pic.imgdb.cn/item/646104230d2dde57779ff077.gif') no-repeat center/cover; transition:2s;z-index: 2;opacity:0.3;transform:perspective(0px) rotate(0deg)scale(1); }
#papa:hover::before { transform:perspective(0px) rotateX(0deg)scale(1,1);opacity:0;}
.bfq{position: absolute;top:20%; left:90%;z-index: 999;}
#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: 9999;--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:-45px; left:80px;width: 80px;height: 80px;border-radius:0%;animation: spin 6s infinite linear;animation-play-state: var(--state);}
@keyframes spin {0%{transform: rotate(0deg);}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 45px 华文隶书;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="main" >
<div id="stars"></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"><img id="image0" src="https://www.kumeiwp.com/sub/filestores/2023/05/31/51733b12080ee852d02abbdc37939edd.gif" width="100%" height="100%"></span><input type="range" id="prog" step="0" max="100" value="0" /><span id="wenz">焱鑫磊博客欢迎你</span></div></div>
</div>
<audio id="aud" src="https://i.mp3.wf/view.php/fb0b086351ba80283f86e072772dc5a4.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 = `《走在人世间》风语
词：健康是福 曲：健康是福 风语
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: 0px; bottom: 0px;',
btn_txt: '\d',
});
FS({
pa: papa,
set: 'backgroun: #333; color: snow; border: 0px solid snow; top:15px; left: 15px;font: normal 30px 华文隶书;color:#ffffff;',
});
})();
</script>
<style type="text/css">
#rotate-words {text-align:center;
position:absolute;z-index: 2;
top:0%;
left:0%;
padding:20% 0;
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;
left:10vw;
width:80vw;
line-height:1.2em;
animation: rotate-word 36s linear 4 ;
}
@keyframes rotate-word {0% {
opacity: 0;
transform: translatex(0%);
}
8% {
opacity: 1;
transform: translatex(0%);
}
17% {
opacity: 1;
transform: translatex(0%);,
}
19% {
opacity: 0;
transform: translatex(0%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#rotate-words :nth-child(2) { animation-delay: 6s}
#rotate-words :nth-child(3) { animation-delay: 12s}
#rotate-words :nth-child(4) { animation-delay: 18s}
#rotate-words :nth-child(5) { animation-delay: 24s}
#rotate-words :nth-child(6) { animation-delay: 30s}
</style>
<style>
#main {
position: relative;
overflow: hidden;
width: 100%; z-index: 2;
min-height: 98vh;
perspective: 340px;}
.stop #main {animation-play-state: paused;}
#stars {
position: absolute;z-index: 2;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
border-radius:50%;
box-shadow: -238px 108px #fff000, 193px -376px #ff0000, -1264px -60px #fff000,145px -443px #fff000, -1440px 37px #fff000, 262px -136px #fff000, 212px 219px #fff000, 319px 223px #fff000, 1246px -51px #c9c9c9,308px 26px #fff000, 147px 229px #fff000, -1041px 450px #fff000, 671px 86px white, -921px 234px #fff000, -957px 242px #fff000, 1249px -285px #fff000, 741px 434px #fff000, -1030px 330px #00f000, 311px -475px #fcfcfc, -413px -105px #ff0000, 868px -435px #f7f7f7, -790px 289px #ff0000, 202px 427px #fcfcfc, -22px -158px #ff0000, -1294px -297px #cccccc, -63px 200px #ff0000, -592px -86px #f7f7f7, -732px 366px white, -1426px -262px #e8e8e8, 475px -400px #ff0000, -1442px -153px #00ff00, 1124px -219px #ededed, 701px 257px #ff0000, 36px -179px #ff0000, -937px 480px #f7f7f7, -267px -418px #00ff00, 1467px 127px #ff0000, -1128px 274px #d1d1d1, -180px 430px #e0e0e0,180px 430px #ffffff, 624px 275px #ff0000, -473px 150px #e6e6e6, -537px -348px #d4d4d4, 410px 455px #ff0000, 497px -29px #cccccc, 416px -370px whitesmoke, 977px 82px #c2c2c2, 1209px -222px #f0f0f0, 637px 360px #fcfcfc,-416px 370px whitesmoke, -1049px 409px white, 959px 407px #ff0000, -1153px -168px #dedede, -437px -216px #dbdbdb, -572px 420px #ff0000, -228px 78px #ff0000, -925px 452px #ccffcc, 244px 30px #ff0000, 453px -336px #fff000, -453px -336px #ff0000, 993px -63px #c2c2c2, 670px -343px #d9d9d9, -1088px 344px #000078, -170px -153px #fff000, 987px -208px #00ff00, 596px 166px #fcfcfc, -1362px -28px #ff0000, 1291px -106px #e3e3e3, -1128px 169px #ededed, 1056px 367px #ebebeb, 261px -128px #ff0000, 1017px 401px #cccccc, 1381px 245px #e3e3e3, 536px -113px #fafafa, -92px -217px #e3e3e3, 1481px 268px #00ff00, 832px -345px #000090, -863px 138px #00ff00, -997px -412px #e3e3e3, -330px -260px #ffff00, 691px -39px #fcfcfc, -468px -135px #ff0000, -535px 405px #e8e8e8, -1289px -284px #e3e3e3, 823px -225px #00ff00, -1172px -348px white, 505px -319px #ff0000, 94px -45px #ededed, -687px -64px #c7c7c7, -1133px -456px #e2f2f2, 1357px 135px #e0e0e0, -919px -249px whitesmoke, 206px 32px white, 1453px -338px #cccccc, -764px 83px #e8e8e8, 726px 85px #00f000, 205px 103px #e3e3e3, 85px 116px #d1d1d1, 1104px -121px #00ff00,-1104px 121px #fffcfc, 649px -304px #dbdbdb, -313px 313px whitesmoke, 491px -419px #c9c9c9, -1405px 397px #cfcfcf, 30px -81px #ff0000;130px -130px #eeeeee,1130px -230px #00ff00,-1000px -1550px 30px 0px #ff0000,500px -350px 100px 0px #00ff00;
animation: fly 2s linear infinite;
transform-style: preserve-3d;
}
#stars:before{
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
#stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
#stars:before {
transform: translateZ(-300px);
animation: fade1 2s linear infinite;
}
#stars:after {
transform: translateZ(-600px);
animation: fade2 2s linear infinite;
}
@keyframes fly {
from {
transform: translateZ(0px);
}
to {
transform: translateZ(300px);
}
}
@keyframes fade1 {
from {
opacity: 0.9;
}
to {
opacity: 1;
}
}
@keyframes fade2 {
from {
opacity: 0.2;
}
to {
opacity: 0.9;
}
}
</style>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image0.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
var image0 = document.getElementById("image0"),
button = document.getElementById("mplayer");
if (image0&& button) {
button.onclick = function() {
if (this.value == '') {
image0.play();
this.value = '.';
} else {
image0.stop();
this.value = '';
}
};
}
stars.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>stars.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>stars.style.animationPlayState = 'paused');
</script>
漂亮的制作，播放器按钮也很别致。欣赏焱鑫磊好帖{:4_199:} 前面看到“全屏欣赏”几个字好大啊，正想说呢，看到焱鑫磊已经改了。嗯嗯，现在的大小正好呢{:4_187:} 歌曲很好听，标题怎么是这样的标题呀，看到标题吓一跳{:4_173:} 红影 发表于 2023-6-13 22:55
漂亮的制作，播放器按钮也很别致。欣赏焱鑫磊好帖
谢谢红影鼓励！ 红影 发表于 2023-6-13 22:56
前面看到“全屏欣赏”几个字好大啊，正想说呢，看到焱鑫磊已经改了。嗯嗯，现在的大小正好呢
“全屏欣赏”调整位置时，把字调大了，及时发现改过来了。{:4_187:} 红影 发表于 2023-6-13 22:56
歌曲很好听，标题怎么是这样的标题呀，看到标题吓一跳
草稿箱时没加标题，随便打几个数字。发表时忘了。粗心。加上歌曲名字了。{:4_181:} 焱鑫磊 发表于 2023-6-13 23:50
谢谢红影鼓励！
问好焱鑫磊，那么晚还在啊，辛苦{:4_187:} 焱鑫磊 发表于 2023-6-13 23:54
“全屏欣赏”调整位置时，把字调大了，及时发现改过来了。
是啊，我本来想说的，还没说呢，你就改好了{:4_189:} 焱鑫磊 发表于 2023-6-13 23:58
草稿箱时没加标题，随便打几个数字。发表时忘了。粗心。加上歌曲名字了。
这首歌的歌词内容真心很不错的{:4_199:} 歌词同步丝毫不差！{:4_187:} 亚伦的代码吧，欣赏焱鑫磊的精彩制作 问好老师，欣赏精彩佳作，谢谢分享，点赞！{:4_187:} 樵歌 发表于 2023-6-14 11:05
歌词同步丝毫不差！
谢谢！樵歌好！ 小辣椒 发表于 2023-6-14 17:32
亚伦的代码吧，欣赏焱鑫磊的精彩制作
问候小辣椒好！{:4_187:}
页:
[1]