|
|

楼主 |
发表于 2024-6-19 12:30
|
显示全部楼层
帖子代码
- <style>
- #tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/2/vuyk.jpg') no-repeat center/cover; border-radius: 20px 0; box-shadow: 3px 3px 12px black; z-index: 1; position: relative; }
- #tz::before { content: attr(data-lrc); position: absolute; bottom: 10px; width: 100%; height: 60px; text-align: center; font: normal 32px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text; filter: drop-shadow(-1px -3px 2px cyan); }
- #player { left: calc(50% - 50px); bottom: 80px; width: 100px; height: 100px; filter: drop-shadow(0 0 40px cyan); cursor: pointer; transition: .5s; position: absolute; display: grid; place-items: center; animation: rot 8s linear infinite var(--state); }
- #vid { position: absolute; top: 0; width: 160px; height: 260px; clip-path: circle(60%); object-fit: cover; mix-blend-mode: screen; opacity: .35; pointer-events: none; }
- #player:hover { width: 120px; height: 120px; filter: hue-rotate(180deg) drop-shadow(0 0 40px cyan); }
- c-c { position: absolute; width: 80%; height: 80%; border: thick inset plum; border-radius: 100% 20%; opacity: .75; }
- @keyframes rot { to { transform: rotate(1turn); } }
- </style>
- <div id="tz" data-lrc="烛影">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1995785157" autoplay loop></audio>
- <video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b48ded397d72.mp4" autoplay loop muted disablePictureInPicture></video>
- <div id="player"></div>
- </div>
- <script>
- var curkey = 0, lrcAr = [], total = 10;
- Array.from({length: total}).forEach((c,k) => {
- c = document.createElement('c-c');
- c.style.cssText += `
- transform: rotate(${360 / total * k}deg);
- border-color: #${Math.random().toString(16).substring(2,8)};
- `;
- player.appendChild(c);
- });
- var getAr = (text) => {
- var ar = text.trim().split('\n');
- ar.sort();
- var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
- ar.forEach(item => {
- let result = item.match(reg);
- let tmsg = parseInt(result[1]) * 60 + parseInt(result[2]) + parseInt(result[3]) / 1000;
- lrcAr.push([tmsg, result[4].trim()]);
- });
- };
- var mState = () => {
- tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
- player.title = ['暂停','播放'][+aud.paused];
- };
- aud.onseeked = () => curkey = 0;
- aud.onplaying = aud.onpause = () => mState();
- aud.ontimeupdate = () => {
- if(curkey > lrcAr.length - 1) return;
- if(aud.currentTime >= lrcAr[curkey][0]) {
- tz.dataset.lrc = lrcAr[curkey][1];
- curkey ++;
- }
- };
- player.onclick = () => aud.paused ? aud.play() : aud.pause();
- var lrc = `[00:00.500]WENDY·白 - 烛影\n[00:10.980]hey babe你不用太着急\n[00:13.470]we got time\n[00:14.580]屋外又下起了小雨\n[00:16.380]倒一杯红酒\n[00:17.580]窝进沙发里\n[00:19.230]轻晃的烛影藏着我们的秘密\n[00:22.830]Bing bing闪烁装有我的眼睛\n[00:25.590]纤细的手指不止能弹钢琴\n[00:28.530]do re mi fa so la si如果你想听\n[00:33.750]找部电影其实你早看过了\n[00:36.690]管他呢谁不世界的过客\n[00:39.510]反正到最后也没几人会记得\n[00:43.560]youdon't have to say sorry\n[00:45.630]怎么会有那么多顾虑\n[00:48.150]我们之间已经隔了太多的事情\n[00:50.820]不止玻璃流下雨滴\n[00:52.440]什么工具能留住香气\n[00:57.060]close get close to紧扣的掌心\n[01:02.400]我的耳朵只听得见你的声音\n[01:07.980]统一的心率连着呼吸\n[01:10.590]像棉花糖融化进了水里\n[01:14.340]( only u)在我身边调动情绪才是安心\n[01:19.620]please back my butterfly\n[01:25.290]第一眼的喜欢你让我怎么释怀\n[01:30.810]我试着调整了没有你的生活状态\n[01:36.510]看起来多彩\n[01:37.770]对我而言还是黑白\n[01:42.420]please back my butterfly\n[01:48.090]只有把你变成记忆才不会被人打败\n[01:53.640]你是否也会在某个时间突然想起我来\n[01:59.520]顺风入怀>三十六度温暖\n[02:05.550]回忆不攻自破\n[02:07.710]带着花纹心的脉络\n[02:10.590]他们劝我忘了\n[02:12.030]忘了这本不该发生的\n[02:16.110]( how can i do that)\n[02:16.440]怎么忘了挂着小兔子的(蓝色)毛衣\n[02:19.260]怎么忘了你那闪烁装有我的眼睛\n[02:22.410]怎么忘了烛影里藏着我们的秘密\n[02:28.500]不止玻璃流下雨滴\n[02:34.020]什么工具能留住香气\n[02:40.800]close紧扣的掌心\n[02:42.480]统一的心率连着呼吸\n[02:45.540]我的耳朵快要忘记(你的声音)`;
- getAr(lrc);
- </script>
复制代码 帖子代码没什么特别的,主要是 -webkit-background-clip: text; 下文本阴影的设置,借助 filter: drop-shadow(); 属性实现。
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
南无月
| + 30 |
+ 60 |
+ 30 |
很给力! |
查看全部评分
|