《放弃你是我的错》杨曼
本帖最后由 焱鑫磊 于 2023-4-20 13:21 编辑 <br /><br /><style>#papa { margin: 100px -280px; width: 1164px; height: 620px; background: gray url('https://pic.imgdb.cn/item/6440bd040d2dde57772a7e17.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.joy127.com/url/103978.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 = `《放弃你是我的错》杨曼
LRC歌词制作：焱鑫磊
伤伤心心将我们的缘分划断
耳边还荡着你轻轻的呼唤
回头再望望你那张熟悉的脸
那往日的欢颜啊
不曾再现
只想说 离开你不是我的错
这一切只是你花心的结果
模糊的情爱它伤得我太重
这脆弱的心情啊
无法去承受
女人的爱你比较得太多
有一天你会明白是我爱你最多
蓦然回首 我们走过的路
你会发觉放弃我是你的错
只想说 离开你不是我的错
这一切只是你花心的结果
模糊的情爱它伤得我太重
这脆弱的心情啊
无法去承受
女人的爱你比较得太多
有一天你会明白是我爱你最多
蓦然回首 我们走过的路
你会发觉放弃我是你的错
女人的爱你比较得太多
有一天你会明白是我爱你最多
蓦然回首 我们走过的路
你会发觉放弃我是你的错
伤伤心心将我们的缘分划断
耳边还荡着你轻轻的呼唤
回头再望望你那张熟悉的脸
那往日的欢颜啊
不曾再现
只想说 离开你不是我的错
这一切只是你花心的结果
模糊的情爱它伤得我太重
这脆弱的心情啊
无法去承受
女人的爱你比较得太多
有一天你会明白是我爱你最多
蓦然回首 我们走过的路
你会发觉放弃我是你的错
只想说 离开你不是我的错
这一切只是你花心的结果
模糊的情爱它伤得我太重
这脆弱的心情啊
无法去承受
女人的爱你比较得太多
有一天你会明白是我爱你最多
蓦然回首 我们走过的路
你会发觉放弃我是你的错
女人的爱你比较得太多
有一天你会明白是我爱你最多
蓦然回首 我们走过的路
你会发觉放弃我是你的错
女人的爱你比较得太多
有一天你会明白是我爱你最多
蓦然回首 我们走过的路
你会发觉放弃我是你的错
你会发觉放弃我是你的错
`;
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>
好听的歌，欣赏点赞！ 梦缘 发表于 2023-4-20 15:52
好听的歌，欣赏点赞！
问候梦缘好！{:4_187:} 漂亮的制作。欣赏焱鑫磊好帖{:4_187:} 红影 发表于 2023-4-20 16:26
漂亮的制作。欣赏焱鑫磊好帖
问候红影好！{:4_187:} 焱鑫磊 发表于 2023-4-20 19:01
问候红影好！
问好焱鑫磊，晚上好{:4_187:}
页:
[1]