花海
本帖最后由 醉美水芙蓉 于 2023-5-16 22:46 编辑 <br /><br /><style>#papa {margin: 0px 0 0 calc(50% - 593px);width: 1137px;height: 640px;background: tan url('https://pic2.imgdb.cn/item/646395cc0d2dde57773ea775.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:40px; 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 / 1137px 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/music440615.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> 问好！欣赏美帖！{:4_187:} 好漂亮的设计！音乐放了十来秒自动停了{:4_190:} 这个背景好美。代码貌似和月儿的差不多吧。欣赏水芙蓉美女好帖{:4_187:} 樵歌 发表于 2023-5-17 08:27
好漂亮的设计！音乐放了十来秒自动停了
这个我能全部听到啊，师兄再听听？ 红影 发表于 2023-5-17 08:54
这个我能全部听到啊，师兄再听听？
又好了，可能网络问题。 樵歌 发表于 2023-5-17 09:36
又好了，可能网络问题。
有可能是。 亦是金 发表于 2023-5-17 08:21
问好！欣赏美帖！
谢谢老师支持！ 樵歌 发表于 2023-5-17 08:27
好漂亮的设计！音乐放了十来秒自动停了
问好樵歌！ 红影 发表于 2023-5-17 08:51
这个背景好美。代码貌似和月儿的差不多吧。欣赏水芙蓉美女好帖
是月儿的代码！问候红影美女！ 樵歌 发表于 2023-5-17 08:27
好漂亮的设计！音乐放了十来秒自动停了
这歌需要vip，随时可能中断！ 醉美水芙蓉 发表于 2023-5-17 11:44
是月儿的代码！问候红影美女！
问好水芙蓉美女，中午好{:4_187:} 漂亮的帖，歌好听。{:4_204:} 欣赏老师的佳作，点赞！
醉美水芙蓉 发表于 2023-5-17 11:45
这歌需要vip，随时可能中断！
現在沒停了{:4_204:} 梦缘 发表于 2023-5-17 16:24
漂亮的帖，歌好听。
谢谢老师支持！ 老谟深虑 发表于 2023-5-17 18:36
欣赏老师的佳作，点赞！
谢谢老师支持！ {:4_187:}{:4_187:}{:4_187:} 焱鑫磊 发表于 2023-5-19 00:08
谢谢朋友支持！
页:
[1]