勇气大爆发
<style>#papa {margin: 80px 0 0 calc(50% - 593px);width: 1024px;height: 627px;background: tan url('https://pic.imgdb.cn/item/6475fe95f024cca173c84c17.jpg');box-shadow: 0 0 8px #000;display: grid;place-items: center;position: relative; overflow: hidden;--state: paused;}css-doodle{position: absolute;}</style> <div id="papa"> <css-doodle id="mplayer"> :doodle { @grid: 2 / 300px 60px; color: var(--color); bottom:100px; z-index: 100; --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: Indigo; } /* 时间信息 : 左 */ @nth(1) { @place: 25% 80%; :after { content: var(--ttmsg1); } } /* 控制器 */ @nth(2) { @size: var(--size); clip-path: @shape( fill: evenodd;points: 300;scale: .45;x: cos(2t) + cos(7t);y: sin(2t) + sin(7t); ); @place: 50% 35%; background: var(--color); animation: rot 6s infinite linear var(--state); } /* 时间信息 : 右 */ @nth(3) { @place: 75% 80%; :after { content: var(--ttmsg2); } } /* 进度条 */ @nth(4) { @place: 50% 80%; @size: 100% 2px; background: #bbb; display: grid; place-items: center start; :before { content: ''; width: var(--prog); height: 100%; background: var(--color); } } @keyframes rot { to { transform: rotate(1turn); } } </css-doodle> <css-doodle id="lrc"> :doodle { @size: auto 4em; top: 0; --geci: "css-doodle player"; --motion: cover2; --tt: 1s; } /* 单元格两个伪元素显示lrc歌词 */ display: grid; place-items: center start; :before, :after { content: var(--geci); color: LightGrey; /* 歌词底色 */ font: bold 2em sans-serif; text-shadow: 1px 1px 2px #000; white-space: pre; } :after { position: absolute; width: 0; color: Teal; /* 同步歌词颜色 */ overflow: hidden; animation: var(--motion) var(--tt) linear forwards var(--state); } @keyframes cover1 { from { width: 0; } to { width: 100%; } } @keyframes cover2 { from { width: 0; } to { width: 100%; } } </css-doodle><css-doodle id="mp">:doodle {@grid: 16 / 1024px 640px;border: 1px solid tan;perspective: 800px;}:container {transform-style: preserve-3d;background: radial-gradient(circle,navy);}@size: @r(3,6)px;border-radius: 50%;@place: @r(660,340)px @r(660,120)px;background: rgba(@m3(@r(255)),@r(.6, .9));transform: rotate(@r(720)deg) translate3d(@r(500)px, @r(300)px, @r(1000)px);animation: fly @r(20,40)s @r(-20,0)s infinite linear var(--state);@keyframes fly { to { transform: rotate(0) translate3d(0, 0, 0); } }</css-doodle> <audio id="aud" src="https://www.qqmc.com/mp3/music267360585.mp3" autoplay="" loop=""></audio> </div> <script>(function() {
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
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 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 showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`);});
mplayer.onclick = () => {if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();if(clickIdx === 2) aud.currentTime = progChg;};
mplayer.onmousemove = (e) => {let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);mplayer.style.cursor = cursors;if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;};
})();</script>
即将61愉快{:5_106:} 驻在平安夜前夕 发表于 2023-5-30 21:53
即将61愉快
提前祝朋友儿童节快乐！ 都过六一节了{:4_189:} 好可爱的场景，欣赏水芙蓉的精彩制作{:4_199:} 小辣椒 发表于 2023-5-30 21:56
都过六一节了
提前祝小辣椒六一快乐喔！ 马上六一了，看到祝福帖子感觉都特别可爱呢。水芙蓉美女好制作{:4_199:} 红影 发表于 2023-5-30 22:12
马上六一了，看到祝福帖子感觉都特别可爱呢。水芙蓉美女好制作
红影美女晚上好！ 驻在平安夜前夕 发表于 2023-5-30 21:53
即将61愉快
OK go 马黑黑 发表于 2023-5-30 22:19
OK go
黑黑老师晚上好！ 美好的画面，歌儿也好听{:4_187:} 醉美水芙蓉 发表于 2023-5-30 22:23
黑黑老师晚上好！
晚上好 醉美水芙蓉 发表于 2023-5-30 22:14
红影美女晚上好！
这个帖子特别活泼可爱，给水芙蓉点赞{:4_187:} 千羽 发表于 2023-5-30 22:30
美好的画面，歌儿也好听
千羽晚上好！ 好温暖好有童趣。芙蓉小盆友六一快乐{:4_187:} 喜欢这贴，好想过六一哦 好听的儿歌，欣赏点赞！{:4_187:} 樵歌 发表于 2023-5-31 06:36
好温暖好有童趣。芙蓉小盆友六一快乐
谢谢樵歌点评支持！ 小文 发表于 2023-5-31 08:18
喜欢这贴，好想过六一哦
谢谢小文支持！ 梦缘 发表于 2023-5-31 10:32
好听的儿歌，欣赏点赞！
谢谢老师支持！
页:
[1]
2