《跟着我去呼吸》 - 阿吉太组合
本帖最后由 亦是金 于 2024-3-2 10:55 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1860773">
<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:50px;margin-LEFT: -310px;">
<style>
#papa {
margin: auto;
top: -78px;
left: 0px;
width: 1200px;
height: 700px;
background: url('https://s4.ax1x.com/2022/03/05/bwHjgS.jpg') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#papa:hover
#mplayer { transition: .7s; opacity: .9; }
#vid {
display: none;
top: 200px;
left: 0px;
width: 1200px;
height: 700px;
}
#canv {
position: absolute;
display: block;
opacity: 1;
animation: opa 15s infinite alternate linear;
}
#mplayer {
position: absolute;
left: calc(50% - 15px);
bottom: 5px;
width: 30px;
height: 30px;
border: 2px solid white;
border-radius: 50%;
opacity: 0;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before,
#mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: white;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 10px;
border-width: 10px 12px;
border-color: transparent transparent transparent white;
opacity: var(--disp1);
}
#mplayer::after {
width: 2px;
height: 20px;
border-width: 0 4px 0 4px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 0;} }
#lrc {
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg,hsla(100, 90%, 50%, .45), hsla(80, 90%, 50%, .6), hsla(0, 100%, 50%, .75));
position: absolute;
top: 600px;
left: 380px;
font: bold 2.2em sans-serif;
color: snow;
white-space: pre;
-webkit-background-clip: text;
filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
}
#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%; } }
@keyframes mov {to { transform: translate(var(--xx)); } }
@keyframes scale { to {transform: scale(1.5); } }
</style>
<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:20px;LEFT: -390px;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:32px;">《跟着我去呼吸》</span>
<span style="color:#3d46f7;"><span style="font-size:20px;">- 阿吉太组合</span></div>
<div style="position: relative;width: 500px;height: 50px;top:605px;LEFT: 1000px;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 id="papa">
<canvas id="canv"></canvas>
<div id="mplayer"></div>
<div id="lrc" data-lrc="★ 欢迎欣赏 ★">★ 欢迎欣赏 ★</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1303028444" loop autoplay></audio>
<video id="vid" src="https://www.kumeiwp.com/sub/filestores/2023/04/05/3047f2c23f842f756c46da9211f76356.mp4" loop muted autoplay></video>
<script>
(function(){
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh, 0, 0, ww + 320, hh + 190);if(!vid.paused) {requestAnimationFrame(loop);return;}};
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'), vid.pause()) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
let averAdd = 0, offset = 0, mKey = 0, mFlag = true;
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));}
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr;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 < lrcAr.length; j++) { if (aud.currentTime <= lrcAr) { mKey = j - 1; break; } } if (mKey < 0) mKey = 0; if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1; let time = lrcAr - (aud.currentTime - lrcAr); showLrc(time); };
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let lrcAr = getLrcAr('《跟着我去呼吸》 - 阿吉太组合\n作词：李凤\n作曲：萨琪拉\n歌手 : 阿吉太组合\nLRC歌词编辑：亦是金\n● ● ● ● ● ●\n嘟 嘟日 嘟日 嘟日 都日\n嘟 嘟日 嘟日 嘟 嘟日\n现在就出发 从日出开始\n穿过山和水 看四季交替\n美丽的地方 空气多清新\n放下烦恼放下累 快放空自己\n别犹豫 岁月急\n跟着我 去呼吸\n看看那茶叶飘香\n满山绿荫覆地 多美丽\n蓝天白云 风儿轻\n流水潺潺 心儿静\n鱼儿游过头顶\n生长的动人传说 多神奇\n张开双臂 深呼吸\n充满氧气 好心情\n竹林深处 谁的脚步\n从远古走来 多淘气\n● ● ● ● ● ●\n跟着我呼吸\n从现在开始\n带着爱带着笑带着美丽\n有一个地方秀雅又安宁\n没有烦恼没有累没有哭泣\n别犹豫 岁月急\n跟着我去呼吸\n闭上眼鸟儿蓝天歌唱\n自由自在 多欢愉\n云海深处 红日晚\n满山花开 心儿安\n时间擦去伤痛\n让微笑更加灿烂\n多温暖\n\n别再犹豫 岁月急\n跟着我 去呼吸\n让时间暂停\n让翅膀准备好飞翔\n别彷徨\n\n闭上眼睛 深呼吸\n充满氧气 好心情\n喧闹的世界\n快跟着我找个地方\n深呼吸\n-- 谢谢欣赏 --\n\n');
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
face.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>
</td></tr></table> 现在就出发，走入空气清新的美丽大自然。用了小播还有图片和视频相互转化。很漂亮的制作亦是金老师好帖{:4_199:} 走过路过不能错过，来帖子里深呼吸几口{:4_173:} 歌词同步很精准，摇摆字的标题也很漂亮{:4_187:} 红影 发表于 2023-4-6 09:08
现在就出发，走入空气清新的美丽大自然。用了小播还有图片和视频相互转化。很漂亮的制作亦是金老师好帖{:4_ ...
问好红影！{:4_187:} 红影 发表于 2023-4-6 09:08
走过路过不能错过，来帖子里深呼吸几口
走！跟着我去呼吸！{:4_189:} 红影 发表于 2023-4-6 09:12
歌词同步很精准，摇摆字的标题也很漂亮
谢谢欣赏点评！祝你欣赏愉快！{:4_187:} 亦是金 发表于 2023-4-6 09:21
问好红影！
人间四月天，跑进大自然去深呼吸，真是个不错的建议，这个帖子名好{:4_199:} 亦是金 发表于 2023-4-6 09:22
走！跟着我去呼吸！
对，忘记尘世间的烦恼，在森林在草地呼吸春的气息{:4_204:} 亦是金 发表于 2023-4-6 09:22
谢谢欣赏点评！祝你欣赏愉快！
不客气啊，感谢亦是金老师带来的好帖{:4_187:} 春天是个好季节，春暖花开，空气清新，是该出去走走，深呼气！{:4_204:} 天然氧吧必须去了，欣赏精彩制作{:4_199:}
页:
[1]