祝你生日乐哈哈 TO 樵歌
<style>
#papa {
--state: paused;
margin: 80px 0 0 calc(50% - 593px);
width: 1080px;
height: 640px;
background: lightgreen url('https://s1.ax1x.com/2023/03/15/pp3JxIg.jpg') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
display: grid;
place-items: center;
position: relative;
}
#lrc {
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(20, 70%, 50%, .65));
position: absolute;
top: 40px;
font: bold 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);
}
#face {
position: absolute;
top: 190px; left: 350px;
width: 150px;
height: 150px;
cursor: pointer;
}
#face > span {
position: absolute;
top: 48px;
width: 20px;
height: 8px;
border-radius: 50%;
background: #000;
}
#face > span:nth-of-type(1) {
left: 30px;
animation: mov .5s infinitealternate var(--state);
--xx: 10px;
}
#face > span:nth-of-type(2) {
left: 105px;
animation: mov .5s infinite linear alternate var(--state);
--xx: -10px;
}
#face > span:nth-of-type(3) {
height: 8px;
background: none;
border: 1px solid #ff0000;
top: 70px;
left: 75px;
transform: scale(.5);
animation: scale .15s infinite alternate 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>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1814308157.mp3" loop autoplay></audio>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="face">
<span></span>
<span></span>
<span></span>
</div>
<div style="position: absolute;bottom: 20px; opacity: 0.8; width:500px;">
<img alt="" src="https://pic.imgdb.cn/item/63c6b8c2be43e0d30e9f9d00.gif"/></div>
<div style="position: absolute; left: 540px; top: 160px; opacity: 1; width:230px;">
<img alt="" src="https://pic.imgdb.cn/item/63cfb861588a5d166c7178a9.gif"/></div>
</div>
<script>
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祝你生日快乐哈哈哈哈\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> 做个搞笑的，今天这个好日子，一起乐呵一下。祝师兄生日快乐{:4_187:} 就是欢乐一下，没好意思发祝福版块，在这个版块里乐呵一下吧{:4_173:} 哈哈哈{:4_170:}{:4_189:}{:4_172:}{:4_196:}{:4_205:} 樵哥哥生日快拉哈哈~~{:4_172:} 这个熊猫效果上去了{:4_178:} 亲爱的，好制作，好有趣。。。。。{:4_208:} 亲爱的~~~马上16号了，我们庆祝樵哥哥生日圆满结束 谢谢师妹用最新马术来来逗师兄一乐，{:4_358:}亏了昨晚没看到，否则要失眠了{:4_185:} 那熊猫的小嘴马一歪歪的笑得多么可爱，那唱的人口音有点儿象上海周边普通话，太搞笑了哈哈哈哈 红影 发表于 2023-3-15 23:55
做个搞笑的，今天这个好日子，一起乐呵一下。祝师兄生日快乐
看到见到都笑S师兄了{:4_170:} 小辣椒 发表于 2023-3-15 23:59
樵哥哥生日快拉哈哈~~
只差一分钟就12点了，谢谢小辣椒，谢谢红影，为了赶在正日子里，你们两小妹妹也真是拼了，让樵哥哥感动不已{:4_185:}{:4_179:} 小辣椒 发表于 2023-3-16 00:01
亲爱的~~~马上16号了，我们庆祝樵哥哥生日圆满结束
嗯嗯，过了生日咱们也一同快乐{:4_205:} 太有趣了 小辣椒 发表于 2023-3-15 23:58
哈哈哈
哈哈，亲爱的，还是被你移到祝福礼堂来了{:4_170:} 小辣椒 发表于 2023-3-15 23:59
这个熊猫效果上去了
我也不知道做什么，决定做个帖子的想法比较突然，然后也没思路，就索性学个黑黑最新播放器效果了{:4_173:} 小辣椒 发表于 2023-3-16 00:00
亲爱的，好制作，好有趣。。。。。
这个效果比较适合搞笑的，正好生日也适合欢乐，就搜了个这样的歌曲{:4_173:} 小辣椒 发表于 2023-3-16 00:01
亲爱的~~~马上16号了，我们庆祝樵哥哥生日圆满结束
是啊，昨天一不小心竟然那么晚，亲爱的最辛苦，本来前面就送了帖子的，结果又新送礼物，一送再送{:4_179:} 樵歌 发表于 2023-3-16 06:44
谢谢师妹用最新马术来来逗师兄一乐，亏了昨晚没看到，否则要失眠了
这个最新马术挺适合弄欢乐的，师兄乐了，送快乐的目的就达到了{:4_173:} 樵歌 发表于 2023-3-16 06:47
那熊猫的小嘴马一歪歪的笑得多么可爱，那唱的人口音有点儿象上海周边普通话，太搞笑了哈哈哈哈
也不知道是哪的话，但是挺好玩的。做得比较简单，博师兄一乐{:4_187:}