寥寥一生-苏谭谭
<style>
#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7a67dece8aff3b212fa180d8c1f7eac5.jpg') center/cover no-repeat;box-shadow: 0px 0px 0px 10px #880000,0px 0px 0px 2px #ffffff inset, 0px 0px 150px 20px #000090 inset;position: relative; z-index: 1; --state: running; overflow:hidden;}
#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 50%;top:82%; transform: translate(-50%, 10px);font:normal 3em 华文隶书; color:#0000;filter:hue-rotate(0deg)contrast(120%)brightness(200%);filter: drop-shadow( 2px 2px 0px #000000); z-index: 2; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#ff0000 ; filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1{0% { width: 0%;letter-spacing: 0px; filter: blur(0px); } to { width: 500%;} }
@keyframes cover2 {0% { width: 0%;letter-spacing: 10px; color:#000090;}100% { width: 500%; letter-spacing: 0px;color:#ff0000; ; }}
#clock {z-index: 20;
margin: 580px 40px;
width: 1000px;
height: 50px;
color: #ff0000;
display: grid;
place-items: center;
position: relative;
cursor: pointer;
opacity: 1;
--state: paused;
}
#clock::before {--deg: 25deg;top: -10%;
position: absolute;
content: '';
width: 3px;
height: 3px;
background: linear-gradient(89deg, #c0392b 15%,#030470 49%,#DE0202 80%);
transform:translate(0%,0%);
animation: rot .3s infinite alternate linear var(--state);
}
@keyframes rot {
0% { width: 0%;letter-spacing: 0px; filter:hue-rotate(360deg)contrast(100%)brightness(600%); }100% { width: 100%; letter-spacing: 10px; }}
</style>
<div id="papa">
<div id="clock">00:0000:00<span></span><span></span></div>
<div id="lrc" data-lrc="亚伦影音工作室">亚伦影音工作室</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music271091689.mp3" loop autoplay></audio>
<script>
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;};
clock.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => clock.style.setProperty('--state','running'));
aud.addEventListener('pause', () => clock.style.setProperty('--state','paused'));
aud.addEventListener('canplay', () => clock.style.setProperty('--time',aud.duration + 's'));
aud.addEventListener('timeupdate', () => clock.innerHTML = toMin(aud.currentTime) + ' ' +toMin(aud.duration) + '<span></span><span></span>');
</script>
<script>
(function() {
let 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 averAdd = 0, offset = 0;
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 geci = `寥寥一生-苏谭谭
作词：未子夫
作曲：龙小晨
编曲：张川
制作：亚伦
和声：盛欣圆
吉他：潘春宇
混音：张可人
封面：亚伦
企划：亚伦
出品：亚伦工作室
OP/发行 亚伦影音
。。。。。。
跌跌撞撞 沾了一身风霜
慌慌张张 为那碎银几两
追的月亮 隔在远远他乡
那个姑娘 已不知去向
踉踉跄跄 撞过几道南墙
奔奔忙忙 在现实名利场
孤单迷茫 落满寸寸忧伤
还劝自己莫失莫忘
莫怪酒杯太浅 难许情深以往
莫怪那人生太短 回首已夕阳
盼过成名在望 盼别来无恙
一生写完也就 寥寥几行
莫怪酒杯太浅 对歌醉梦一场
莫怪那巷子太短 走不回过往
谁都有愿难偿 谁又不彷徨
心酸道尽不过 一纸荒唐
踉踉跄跄 撞过几道南墙
奔奔忙忙 在现实名利场
孤单迷茫 落满寸寸忧伤
还劝自己莫失莫忘
莫怪酒杯太浅 难许情深以往
莫怪那人生太短 回首已夕阳
盼过成名在望 盼别来无恙
一生写完也就 寥寥几行
莫怪酒杯太浅 对歌醉梦一场
莫怪那巷子太短 走不回过往
谁都有愿难偿 谁又不彷徨
心酸道尽不过 一纸荒唐
莫怪酒杯太浅 难许情深以往
莫怪那人生太短 回首已夕阳
盼过成名在望 盼别来无恙
一生写完也就 寥寥几行
莫怪酒杯太浅 对歌醉梦一场
莫怪那巷子太短 走不回过往
谁都有愿难偿 谁又不彷徨
心酸道尽不过 一纸荒唐
`;
let lrcAr = getLrcAr(geci);
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.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 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;}
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script> 欣赏老师佳作！{:4_187:} 漂亮的画面，歌曲好听，制作精美。欣赏亚伦老师好帖{:4_187:}
页:
[1]