|
|
楼主 |
发表于 2023-5-12 16:04
|
显示全部楼层
本帖最后由 起个网名好难 于 2023-5-13 00:09 编辑
- <style>
- #lrc { --motion: cover1; --tt: 1s; position: absolute; bottom: 25px; font: bold 2.6em sans-serif; color: #FAEFC0;
- -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); }
- #lrc::before { position: absolute; content: attr(data-lrc); width:100%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap;
- background: linear-gradient(180deg,hsla(0,100%,50%,.75),hsla(60,100%,50%,.65)); filter: inherit; -webkit-background-clip: text;
- animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
- @keyframes cover1 { from { width: 0; } to { width: 100%; } }
- @keyframes cover2 { from { width: 0; } to { width: 100%; } }
- @keyframes yao {
- from{ transform: perspective(800px) rotatex(45deg); }
- to { transform: perspective(800px) rotatex(-45deg); }
- }
- .title {
- position:absolute;width:800px;height: 30px;top:30px;LEFT: 30px;z-index: 100;text-align:left;
- filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff);
- animation: yao 1.0s linear infinite alternate var(--state); font-family:微软简中圆;font-weight: bold;color: #f46ff6;transform-origin: top;margin: auto;}
- .title span:nth-child(1) {color:#fb52f9;font-size:32px;}
- .title span:nth-child(2) {color:#3d46f7;font-size:20px;}
- #papa {
- margin: auto;
- top: 0px;
- left: 0px;
- width: 1000px;
- height: 667px;
- background: tan url('https://puui.qpic.cn/vpic_cover/o350602lkya/o350602lkya_1679226623_hz.jpg') no-repeat center / cover;
- box-shadow: 0 0 8px #000;
- display: grid;
- place-items: center;
- position: relative;margin:100px 0 32px -200px;
- box-shadow: 0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;
- overflow:hidden;border-radius:1%;--state:paused;
- }
- #footDesc {
- position:absolute; right:20px; bottom:20px;color:#ff0000;font-family:华文隶书;font-size:20px;font-weight:bold;
- filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)
- }
- </style>
- <div id="papa">
- <css-doodle grid="16">
- :doodle {
- @size: 1000px 667px;
- }
- position: absolute;
- left: -10%;
- top: @r(100)%;
- :after {
- position: absolute;
- content: '@p(♪,¶,♫,♯,♭,♮,♩,♬)';
- color:pink;
- font-size: @r(10, 40)px;
- }
- animation: fall @r(6,20)s @r(-6, 6)s infinite var(--state);
- @keyframes fall {
- 0% { left: -20%; transform: rotate(0deg); }
- 100% {left: 120%; transform: rotate(@p(360, 720)deg); }
- }
- </css-doodle>
- <img src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" style="z-index:88;position:absolute; top: 400px;right:50px;">
- <div class="title"><span>《 山茶花读不懂白玫瑰 》</span><span> - Lil笑笑</span></div>
- <span id="footDesc">模仿《亦是金》网友帖 </span>
- <span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2019620319" autoplay= "autoplay"></audio>
- <css-doodle id="mplayer">
- :doodle {
- @grid: 2 / 350px 100px;
- position: absolute;
- color: var(--color);
- bottom: 0;
- --prog: 0%;
- --size: 60px;
- --ttmsg1: '00:00';
- --ttmsg2: '00:00';
- --color: #f63414;
- bottom:60px;
- }
- @nth(1) {@place: 35% 100%;: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: 65% 100%;: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>
- </div>
- <script>
- (function() {
- let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
- let script = document.createElement('script');
- script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
- document.head.appendChild(script);
- /*********************************************************************/
- let mKey = 0, mFlag = true, slip = 0.1;
- let lrcAr = [
- ['0.00', ' 作词 : 晨晨晨',0.95],
- ['1.00', ' 作曲 : 晨晨晨',0.95],
- ['2.00', ' 编曲 : 卡其漠罗洋/王灏',0.95],
- ['3.00', ' 制作人 : 苏晨',12.91],
- ['16.59', '有一个善良纯洁的女孩',3.19],
- ['19.95', '在下雪的冬天划亮了火柴',3.25],
- ['23.37', '手捧温暖的光向你走来',3.22],
- ['26.76', '“你怎能轻视她对你的爱”（山茶花花语）',3.79],
- ['30.75', '有一个天真浪漫的男孩',3.13],
- ['34.05', '用白色衬衫把阳光叫醒来',3.36],
- ['37.59', '声音发出在不同的时代',3.13],
- ['40.89', '”我足与你相配“的告白（白玫瑰花语）',5.33],
- ['46.50', '山茶花 读不懂白玫瑰',3.51],
- ['50.19', '北山的风吹不到南山尾',3.33],
- ['53.70', '你羡慕我孤独的纯粹',2.94],
- ['56.79', '我羡慕你总会有人陪',3.56],
- ['60.54', '山茶花 读不懂白玫瑰',3.56],
- ['64.29', '遗憾的花不能一起枯萎',3.31],
- ['67.77', '只想疲惫时有你依偎',2.94],
- ['70.86', '从此再也不怕夜的黑',20.58],
- ['92.52', '有一个善良纯洁的女孩',3.11],
- ['95.79', '在下雪的冬天划亮了火柴',3.33],
- ['99.30', '手捧温暖的光向你走来',3.19],
- ['102.66', '“你怎能轻视她对你的爱”（山茶花花语）',3.79],
- ['106.65', '有一个天真浪漫的男孩',3.13],
- ['109.95', '用白色衬衫把阳光叫醒来',3.36],
- ['113.49', '声音发出在不同的时代',3.11],
- ['116.76', '”我足与你相配“的告白（白玫瑰花语）',5.36],
- ['122.40', '山茶花 读不懂白玫瑰',3.51],
- ['126.09', '北山的风吹不到南山尾',3.31],
- ['129.57', '你羡慕我孤独的纯粹',2.94],
- ['132.66', '我羡慕你总会有人陪',3.56],
- ['136.41', '山茶花 读不懂白玫瑰',3.59],
- ['140.19', '遗憾的花不能一起枯萎',3.31],
- ['143.67', '只想疲惫时有你依偎',2.94],
- ['146.76', '从此再也不怕夜的黑',5.33],
- ['152.37', '山茶花 读不懂白玫瑰',3.51],
- ['156.06', '北山的风吹不到南山尾',3.33],
- ['159.57', '你羡慕我孤独的纯粹',2.91],
- ['162.63', '我羡慕你总会有人陪',3.62],
- ['166.44', '山茶花 读不懂白玫瑰',3.56],
- ['170.19', '遗憾的花不能一起枯萎',3.31],
- ['173.67', '只想疲惫时有你依偎',2.96],
- ['176.79', '从此再也不怕夜的黑',4.23],
- ['181.24', ' 混音 : 任天宇',4.23],
- ['185.69', ' 合声 : 李沅芷',4.23],
- ['190.14', ' 统筹 : 申佳琪',4.23],
- ['194.59', ' 监制 : 刘家泽/苏晨',4.23],
- ['199.04', ' 制作公司 : 匠心音乐 x 蔚来音乐 V-LAND Music`',4.5]
- ];
-
- aud.loop = false;
- 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 mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused')) : (papa.style.setProperty('--state', 'running'));
-
- aud.addEventListener('play', mState, false);
- aud.addEventListener('pause', mState, false);
- aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
- aud.addEventListener('timeupdate', () => {
- mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
- mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration-aud.currentTime)}'`);
- mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
- /**************************更新歌词**********************************/
- for (j = 0; j < lrcAr.length; j++) {
- if (aud.currentTime - slip >= lrcAr[j][0]) {
- if (mKey === j) showLrc(lrcAr[j][2]);
- else continue;
- }
- }
- });
- let showLrc = (time) => {
- let name = mFlag ? 'cover1' : 'cover2';
- lrc.innerHTML = lrc.dataset.lrc = lrcAr[mKey][1];
- lrc.style.setProperty('--motion', name);
- lrc.style.setProperty('--tt', time + 's');
- papa.style.setProperty('--state', 'running');
- mKey += 1;
- mFlag = !mFlag;
- };
- 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>
|
|
发表于 2023-5-12 16:03
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-5-12 16:56
发表于 2023-5-12 17:27
发表于 2023-5-12 17:36
发表于 2023-5-12 17:55
