哎哟喂
<style>
#papa {
--state: paused;
margin: -80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: lightgreen url('https://pic.imgdb.cn/item/6412d4b8ebf10e5d53ca1c4a.jpg') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
display: grid;
place-items: center;
position: relative;
}
#face {
position: absolute;
left: 770px;
top: 210px;
width: 110px;
height: 93px;
border: 1px solid #;
border-radius: 100% 100% 80% 80%;
cursor: pointer;
}
#face > span {
position: absolute;
top: 39px;
width: 10px;
height: 16px;
border-radius: 50%;
background: #000;
}
#face > span:nth-of-type(1) {
left: 25px;
animation: mov .5s infinitealternate var(--state);
--xx: 10px;
}
#face > span:nth-of-type(2) {
left: 70px;
animation: mov .5s infinite linear alternate var(--state);
--xx: -10px;
}
#face > span:nth-of-type(3) {
height: 8px;
background: none;
border: 1px solid #000;
top: 68px;
left: 45px;
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=1379591871.mp3" loop autoplay></audio>
<div id="face">
<span></span>
<span></span>
<span></span>
</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');
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_199:} 哎哟喂 哎哟喂，全都喜欢这位小美女，可咋整{:4_173:} 清舟做的这个太好玩了，那个动的嘴正好跟歌曲节奏一致呢，真的像那个嘴里唱出来的{:4_170:} 马黑黑 发表于 2023-3-16 18:02
哎哟喂
想起那个马甲了{:4_189:} 红影 发表于 2023-3-16 18:50
哎哟喂，全都喜欢这位小美女，可咋整
打一架{:4_189:} 梦油 发表于 2023-3-16 17:59
真逗！
没想到真搜到这歌{:4_173:} 绿叶清舟 发表于 2023-3-16 20:52
想起那个马甲了
忘记了 绿叶清舟 发表于 2023-3-16 20:52
打一架
对，胜的人可以跟小美女携手{:4_189:} 绿叶清舟 发表于 2023-3-16 20:52
没想到真搜到这歌
挺有意思的。 红影 发表于 2023-3-16 21:22
对，胜的人可以跟小美女携手
可以握个手{:4_189:} 绿叶清舟 发表于 2023-3-16 21:28
可以握个手
败的人什么都没有，这样它们会不会拼命啊{:4_173:} 创意十足{:4_187:}
矮油喂，这个胖嘟嘟太可爱了{:4_170:} 小辣椒可以抄作业了{:4_173:} 小辣椒 发表于 2023-3-17 13:36
矮油喂，这个胖嘟嘟太可爱了
谢谢辣椒，一群孩子过家家了{:4_189:} 花飞飞 发表于 2023-3-16 22:04
创意十足
看到这效果就想到这马甲了{:4_189:} 红影 发表于 2023-3-16 22:01
败的人什么都没有，这样它们会不会拼命啊
败的奖块创可贴{:4_189:}
页:
[1]
2