|
|
楼主 |
发表于 2023-5-12 12:27
|
显示全部楼层
帖子代码
- <style>
- #papa {margin: 0 0 0 calc(50% - 531px);width: 900px;height: 559px;background: tan url('https://638183.freep.cn/638183/t23/1/yujb.jpg');box-shadow: 0 0 8px #000;display: grid;place-items: center;position: relative;--state: paused;}
- css-doodle{position: absolute;}
- </style>
- <div id="papa">
- <css-doodle id="mplayer">
- :doodle {
- @grid: 2 / 300px 60px;
- color: var(--color);
- bottom: 0;
- z-index: 100;
- --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: lightgreen;
- }
- /* 时间信息 : 左 */
- @nth(1) {
- @place: 25% 80%;
- :after { content: var(--ttmsg1); }
- }
- /* 控制器 */
- @nth(2) {
- @size: var(--size);
- @shape: windmill;
- @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: 10px;
- --geci: "花潮lrc在线"; --motion: cover2; --tt: 1s;
- }
- /* 单元格两个伪元素显示lrc歌词 */
- display: grid;
- place-items: center start;
- :before, :after {
- content: var(--geci);
- color: gray; /* 歌词底色 */
- font: bold 2em sans-serif;
- text-shadow: 1px 1px 2px #000;
- white-space: pre;
- }
- :after {
- position: absolute;
- width: 0;
- color: darkgreen; /* 同步歌词颜色 */
- 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>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1950343972" autoplay loop></audio>
- </div>
- <script>
- (function() {
- let script = document.createElement('script');
- script.src = '/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 = [[3,"程响 - 可能",6.0],[26.07,"可能南方的阳光 照着北方的风",4.6],[31.05,"可能时光被吹走 从此无影无踪",4.6],[36.05,"可能故事只剩下 一个难忘的人",4.6],[41.05,"可能在昨夜梦里 依然笑得纯真",5.6],[48.09,"可能北京的后海 许多漂泊的魂",4.6],[53.06,"可能成都小酒馆 有群孤独的人",4.6],[58.07,"可能枕边有微笑 才能暖你清晨",4.6],[63.04,"可能夜空有流星 才能照你前行",5.8],[70.09,"可能西安城墙上 有人誓言不分 ",4.6],[75.06,"可能要去到大理 才算爱得认真",4.6],[80.06,"可能谁说要陪你 牵手走完一生",4.6],[85.04,"可能笑着流出泪 某天在某时辰 ",9.4],[114.09,"可能桂林有渔船 为你迷茫点灯",4.6],[119.08,"可能在呼伦草原 牛羊流成风景",4.6],[124.09,"可能再也找不到 愿意相信的人",4.6],[129.06,"可能穿越了彷徨 脚步才能坚定",5.8],[136.09,"可能武当山道上 有人虔诚攀登",4.6],[141.09,"可能周庄小巷里 忽然忘掉年轮",4.6],[146.09,"可能要多年以后 才能看清曾经",4.6],[151.07,"可能在当时身边 有双温柔眼晴",6.4],[158.09,"可能西安城墙上 有人誓言不分",4.6],[163.07,"可能要去到大理 才算爱得认真",4.6],[168.07,"可能谁说要陪你 牵手走完一生",4.6],[173.06,"可能笑着流出泪 ",4.6],[178.08,"可能终于有一天 刚好遇见爱情",4.6],[183.04,"可能永远在路上 有人奋斗前行",4.6],[188.04,"可能一切的可能 相信才有可能",4.6],[193.03,"可能拥有过梦想 才能叫做青春",9.0],];
- 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[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);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[mKey][1] + '"');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[j][0]) {cKey = j;if (mKey === j) showLrc(lrcAr[j][2]);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[clickIdx];if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;};
- })();
- </script>
|
评分
-
| 参与人数 2 | 威望 +52 |
金钱 +105 |
经验 +52 |
收起
理由
|
 红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
 南无月
| + 2 |
+ 5 |
+ 2 |
赞一个! |
查看全部评分
|
发表于 2023-5-12 12:25
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-5-12 12:32
发表于 2023-5-12 13:19
发表于 2023-5-12 17:30
