|
|
楼主 |
发表于 2023-6-23 18:21
|
显示全部楼层
帖子代码
- <style>
- #mydiv {
- margin: 0 0 0 calc(50% - 651px);
- width: 1140px;
- height: 640px;
- background: url('https://638183.freep.cn/638183/t23/2/icvz.jpg');
- box-shadow: 0 0 8px 0 #000;
- display: grid;
- place-items: center;
- position: relative;
- }
- #lrc {
- position: absolute;
- width: fit-content;
- height: fit-content;
- top: 5%;
- font: bold 2.4em Sans-serif;
- color: #fff;
- text-shadow: 1px 1px 2px #000;
- white-space: pre;
- display: inherit;
- place-items: inherit;
- user-select: none;
- --state: paused; --motion: cover2; --tt: 2s;
- }
- #lrc::before, #lrc::after { position: absolute; content: ''; cursor: pointer; }
- #lrc::before {
- content: attr(data-lrc);
- width: 100%;
- height: 100%;
- white-space: pre;
- width: 0;
- left: 0;
- color: orange;
- overflow: hidden;
- animation: var(--motion) var(--tt) linear forwards var(--state);
- }
- #lrc::after {
- width: 50px;
- height: 50px;
- bottom: -60px;
- background: red;
- border-radius: 0%;
- opacity: .7;
- clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
- animation: rot 6s infinite linear var(--state);
- }
- @keyframes cover1 { from { width: 0; } to { width: 100%; } }
- @keyframes cover2 { from { width: 0; } to { width: 100%; } }
- @keyframes rot { to { transform: rotate(360deg); } }
- </style>
- <div id="mydiv">
- <div id="lrc" data-lrc="HUACHAO">HUACHAO</div>
- </div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=36199224" autoplay="autoplay" loop="loop"></audio>
- <script>
- (function() {
- let mKey = 0, mFlag = true, slip = 0;
- let lrcAr = [[2,"听乡音",22.0],[24,"演唱 李绪杰",2.0],[26,"在紫个静静个夜",3.8],[32,"瓦一人食着功夫茶",4.1],[37.09,"望着窗外个万家灯火",6.0],[44.01,"望唔着瓦个潮汕老家",4.6],[49.08,"城市个高楼大厦",5.3],[55.08,"遮唔着天顶个月",5.1],[61.08,"孤单个心只有胶己明白",6.0],[67.07,"肃穆个茶只有月娘相陪",6.0],[73.03,"紫块个厝边头尾",6.0],[79.03,"无人甲瓦淡潮汕话",5.4],[85.02,"各人有各人个生活",5.5],[91.02,"有事无事无人来借问下",5.5],[97.06,"每次甲父母拍电话",5.5],[103.06,"艰苦个事从来无提扶过",5.4],[109.04,"惊伊人牵挂，游子想家个心情",8.0],[117.03,"地人会体会",5.2],[157.07,"城市个高楼大厦",4.2],[163.06,"遮唔着天顶个月",4.8],[169.06,"孤单个心只有自己明白",6.0],[175.07,"肃穆个茶只有月娘相陪",6.0],[181.02,"紫块个厝边头尾",5.5],[187.02,"无人甲瓦淡潮汕话",5.4],[193.02,"各人有各人个生活",5.6],[199.02,"有事无事无人来借问下",5.4],[205.01,"每次甲父母拍电话",5.2],[211.01,"艰苦个事从来无提扶过",5.1],[216.08,"惊伊人牵挂，游子想家个心情",8.0],[224.09,"地人会体会",7.5]];
- let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- 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');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
- 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); };
- 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;}}});
- aud.addEventListener('play', mState, false);
- aud.addEventListener('pause', mState, false);
- aud.addEventListener('seeked', () => calcKey());
- lrc.onclick = () => aud.paused ? aud.play() : aud.pause();
- })();
- </script>
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
 小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|
发表于 2023-6-23 18:19
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-6-23 18:21
发表于 2023-6-23 18:41
