亚伦影音工作室 发表于 2023-4-22 14:57

探头的咪咪

<style>
#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/98a0ba40db4334b3dcfd49811ee781f7.mp4.jpg') center/cover no-repeat; box-shadow:0 0px 0px 3px #800000; position: relative; z-index: 1; --state: running; overflow:hidden;}
#lrc { --motion: cover2; --tt: 1s; position: absolute; left:5%;top:50px; transform: translate(-50%, 10px);font:normal 2.5em 华文隶书; color:#0000;filter:hue-rotate(360deg)contrast(120%)brightness(200%)drop-shadow( 0px 2px 0px #ffffff); z-index: 2; writing-mode: vertical-rl;}
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#E00000 ; 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);writing-mode: vertical-rl; }
@keyframes cover1{0% { width: 100%;letter-spacing: 0px; filter: blur(0px); height: 0;} to { width: 100%;height: 300%;} }
@keyframes cover2 {0% { width: 100%;letter-spacing: 10px; height: 0; }100% { width: 100%; height: 300%;color:#000080; } }

#clock {z-index: 42;left: 17%;top:15%;
        width: 21em;
        height: 16em;
        background-color: white;
        background-image:
                radial-gradient(ellipse at 50% 60%, #333 1.2em, transparent 1.2em),
                radial-gradient(ellipse at 50% 80%, #555 0.6em, transparent 0.6em);
        border: .7em solid #333;
        border-top-left-radius: 11em;
        border-top-right-radius: 11em;
        border-bottom-left-radius: 11em 6em;
        border-bottom-right-radius: 11em 6em;
        border-bottom-width: 1em;
        box-shadow: inset 1em -1em 0 #eee;
display: grid;place-items: center;color: #000000;
        position: absolute;transform:perspective(0px) rotate(-8deg)scale(0.4,0.4);--state: paused;
}

#clock::before,#clock::after {
content: '';
position: absolute;
width: 7em;
height: 4em;
}

#clock::before {--deg: 25deg;
        content: '';
        position: absolute;
        width: 7em;
        height: 4em;
        left: 2.9em;
        top: 5.5em;
        background-color: #333;
        background-image:
                radial-gradient(circle at 5.1em 2em, white 0.3em, transparent 0.3em),
                radial-gradient(circle at 4.6em 2em, #333 0.7em, transparent 0.7em),
                radial-gradient(circle at 4.5em 2em, white 1em, transparent 1em);
        border-radius: 50% 50% 45% 42%;
        transform: rotate(-45deg);
        box-shadow: 1em -7.2em 0 -0.4em #333;
        animation: before-animate 1s ease-in-out infinite alternatevar(--state) ;
}

#clock::after {
        content: '';
        position: absolute;
        width: 7em;
        height: 4em;
        left: 11.1em;
        top: 5.5em;
        background-color: #333;
        background-image:
                radial-gradient(circle at 2.4em 1.5em, white 0.3em, transparent 0.3em),
                radial-gradient(circle at 2.4em 2em, #333 0.7em, transparent 0.7em),
                radial-gradient(circle at 2.5em 2em, white 1em, transparent 1em);
        border-radius: 50% 50% 42% 45%;
        transform: rotate(45deg);
        box-shadow: -1em -7.2em 0 -0.4em #333;
        animation: after-animate 1s ease-in-out infinite alternate -1s var(--state) ;
}

@keyframes before-animate {
        to {
                transform: rotate(-40deg);
                background-image:
                        radial-gradient(circle at 4.9em 1.8em, white 0.3em, transparent 0.3em),
                        radial-gradient(circle at 4.4em 1.8em, #333 0.7em, transparent 0.7em),
                        radial-gradient(circle at 4.5em 2em, white 1em, transparent 1em);
        }
}

@keyframes after-animate {
        to {
                transform: rotate(40deg);
                background-image:
                        radial-gradient(circle at 2.6em 1.3em, white 0.3em, transparent 0.3em),
                        radial-gradient(circle at 2.6em 1.8em, #333 0.7em, transparent 0.7em),
                        radial-gradient(circle at 2.5em 2em, white 1em, transparent 1em);
        }
}
</style>
<div id="papa">
<div id="clock">00:00 &nbsp; &nbsp; 00:00<span></span><span></span></div>
<div id="lrc" data-lrc="亚伦影音工作室">亚伦影音工作室</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music7950413.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 = ':' + 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) + ' &nbsp; &nbsp; ' +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 = `熊猫咪咪 - 少儿歌曲
竹子开花罗喂
咪咪躺在妈妈的怀里数星星
星星呀星星多美丽
明天的早餐在哪里
咪咪牙咪咪请你相信
我们没有忘记你
高高的月儿天上挂
明天的早餐在我心底
请让我来帮助你
就像帮助我自己
请让我去关心你
就像关心我们自己
这世界 会变得更美丽
太阳出来罗喂
照亮我也照亮你
一样的空气我们呼吸
这世界 我和你生活在一起
请让我来帮助你
就像帮助我自己
请让我去关心你
就像关心我们自己
这世界 会变得更美丽
请让我来帮助你
就像帮助我自己
请让我去关心你
就像关心我们自己
这世界 会变得更美丽
请让我来帮助你
就像帮助我自己
请让我去关心你
就像关心我们自己
这世界 会变得更美丽
请让我来帮助你
就像帮助我自己
请让我去关心你
就像关心我们自己
这世界 会变得更美丽
`;
        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-22 19:15

好可爱的大咪咪啊，欣赏问好！{:4_187:}

红影 发表于 2023-4-22 19:26

这个绘制的大熊猫头像好可爱，耳朵和眼睛都会动。额头上还有时间显示，很有趣的设计{:4_199:}

马黑黑 发表于 2023-4-22 19:33

这个有趣

埘绱 发表于 2023-4-23 13:23

好可爱的大猫，歌曲也好听{:4_208:}

加林森 发表于 2023-4-23 18:16

挺有意思的播放器。

小辣椒 发表于 2023-4-23 19:03

亚伦这个播放器设计的好可爱，歌词同步还做了竖的{:4_199:}
页: [1]
查看完整版本: 探头的咪咪