《你是落在我心里的一抹红》王馨（改编）
本帖最后由 焱鑫磊 于 2023-5-18 12:58 编辑 <br /><br /> <style>#papa {margin: 100px 0 0 calc(50% - 653px);width: 1164px;height: 640px;background: tan url('https://pic2.imgdb.cn/item/6464f9890d2dde57772391b5.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 / 1164px 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.joy127.com/url/104945.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_199:} 红影 发表于 2023-5-18 13:25
这样的场景加上粒子效果真的好美啊，焱鑫磊太棒了，这个制作好美啊
问好红影！{:4_204:}{:4_204:}{:4_204:} 这个制作趄{:4_177:}美啊 小文 发表于 2023-5-18 18:36
这个制作趄美啊
小文晚上好！{:4_187:} 焱鑫磊 发表于 2023-5-18 18:09
问好红影！
特别喜欢这个场景，有山有水的{:4_204:} 欣赏好听的歌，感谢分享！{:4_176:} 梦缘 发表于 2023-5-19 11:03
欣赏好听的歌，感谢分享！
问候梦缘好！{:4_187:}
页:
[1]