论坛 › 欢乐水吧 › 红色高跟鞋

马黑黑 发表于 2022-6-9 07:26

红色高跟鞋

<style>
.mama {
        left: -214px; padding: 10px; width: 1024px; height: 560px;
        background: linear-gradient(120deg, #0029FF 0%, #001270 100%), radial-gradient(100% 222% at 0% 100%, #CD04FF 0%, #FF004D 57%), linear-gradient(270deg, #F2096B 0%, #ED0B0B 100%), linear-gradient(300deg, #C478B3 0%, #EA2856 100%), radial-gradient(90% 110% at 100% 100%, #96A300 45%, #875901 100%), linear-gradient(6.54deg, #20ADFD 7%, #1700A4 50%);
        background-blend-mode: exclusion, color-dodge, color-burn, color-burn, color-dodge, normal;
        border: 1px dotted gold; position: relative; }
.shoes { position: absolute; width: 400px; top: 20px; right: 20px; border-radius: 50%; mix-blend-mode: color; }
.shoes:hover { animation: rot 1s forwards; }
#lrcDiv_outer { position: absolute; left: 20px; top: 20px; width: fit-content; height: fit-content; padding: 10px 14px; background: transparent linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.85)); box-shadow: 2px 2px 4px #333; border-radius: 6px; cursor: pointer; }
#lrcDiv_inner { width: 340px; height: 72px; padding: 0px; overflow: hidden; user-select: none;}
#lrcUl { position: relative; top: 0; margin: 0; padding: 0;}
#lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: skyblue; text-shadow: 1px 1px 1px #333; list-style-type: none; }
.meter { position: absolute; top: 40px; width: 100px; transform: translate(-60px, -2px) rotate(-90deg); cursor: pointer; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div class="mama">
        <div id="lrcDiv_outer">
                <meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
                <div id="lrcDiv_inner"><ul id="lrcUl"></ul></div>
        </div>
        <img class="shoes" src="/data/attachment/forum/202206/09/072354ntsiqirotyiriiiy.jpg" alt="" />
</div>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=1397513361.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let aud = document.querySelector('.aud'),
        meter = document.querySelector('.meter'),
        lrcUl = document.getElementById('lrcUl');
let lrcAr = [
        ['0.11','曲名 : 红色高跟鞋'],
        ['0.22','作词 : 蔡健雅'],
        ['1.71','作曲 : 蔡健雅'],
        ['3.78','翻唱：韩甜甜'],
        ['11.52','该怎么去形容你最贴切'],
        ['16.76','拿什么跟你作比较才算特别'],
        ['22.16','对你的感觉 强烈'],
        ['24.94','却又不太了解'],
        ['28.93','只凭直觉'],
        ['31.25','你像窝在被子里的舒服'],
        ['36.53','却又像风 捉摸不住'],
        ['41.88','像手腕上散发的香水味'],
        ['47.53','像爱不释手的'],
        ['52.90','红色高跟鞋'],
        ['65.91','该怎么去形容你最贴切'],
        ['71.31','拿什么跟你作比较才算特别'],
        ['76.79','对你的感觉 强烈'],
        ['79.50','却又不太了解'],
        ['83.32','只凭直觉'],
        ['85.61','你像窝在被子里的舒服'],
        ['91.06','却又像风'],
        ['93.01','捉摸不住'],
        ['96.42','像手腕上散发的香水味'],
        ['101.90','像爱不释手的'],
        ['107.27','红色高跟鞋'],
        ['124.04','你像窝在被子里的舒服'],
        ['129.30','却又像风'],
        ['131.29','捉摸不住'],
        ['134.83','像手腕上散发的香水味'],
        ['140.17','像爱不释手的'],
        ['146.05','我爱你有种左灯右行的冲突'],
        ['151.20','疯狂却怕没有退路'],
        ['156.38','你能否让我停止这种追逐'],
        ['162.57','就这么双 最后唯一的'],
        ['167.06','红色高跟鞋'],
        ['172.30','声乐老师：石栋颖'],
        ['174.20','录音：石栋颖'],
        ['175.96','Studio：小石头和孩子们'],
        ['176.79','lrc歌词制作 : lrc maker']
];

for(j=0; j<lrcAr.length; j++){
        lrcUl.innerHTML += '<li id="li' + lrcAr + '">' + lrcAr + '</li>';
}

aud.addEventListener('timeupdate', () => {
        let prog = 100 * aud.currentTime / aud.duration;
        meter.value = prog;
        let tt = aud.currentTime;
        for(j=0; j<lrcAr.length; j++){
                if(tt >= lrcAr){
                        if(j > 0){
                                let idxLast = lrcAr;
                                document.getElementById('li' + idxLast).style.color = 'skyblue';
                                lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
                        }
                        let idx = lrcAr;
                        document.getElementById('li' + idx).style.color = 'gold';
                }
        }
})

aud.addEventListener('ended', () => {
        document.getElementById("li" + lrcAr).style.color = 'skyblue';
        lrcUl.style.top = 0;
})

lrcUl.onclick = meter.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2022-6-9 07:32

lrc歌词的制作使用最新更新的 lrc maker 完成，该更新加入了误差处理机制（测试中）。lrc maker尚未打包，仅在一楼做了更新：

https://www.huachaowang.com/forum.php?mod=viewthread&tid=60264&extra=page%3D1

红影 发表于 2022-6-9 08:19

这个歌词同步已经很准确了。纯代码背景，图图与鼠标互动。非常漂亮的制作{:4_187:}

红影 发表于 2022-6-9 08:21

马黑黑 发表于 2022-6-9 07:32
lrc歌词的制作使用最新更新的 lrc maker 完成，该更新加入了误差处理机制（测试中）。lrc maker尚未打包， ...

看到初始设置0.2 这个比较靠谱，可选值从0-5有点大了，能差5秒，这反应得多迟钝。我觉得0-1就足够了{:4_173:}

红影 发表于 2022-6-9 08:25

这个帖子里有底板设计、彩色边框、鼠标划过旋转高跟鞋，还有改进版歌词制作。可学的东西很多{:4_199:}

加林森 发表于 2022-6-9 08:28

好玩。老黑又玩出新意了啊。{:4_199:}

马黑黑 发表于 2022-6-9 11:39

红影 发表于 2022-6-9 08:19
这个歌词同步已经很准确了。纯代码背景，图图与鼠标互动。非常漂亮的制作

background-image又是大佬的量产产品

马黑黑 发表于 2022-6-9 11:39

加林森 发表于 2022-6-9 08:28
好玩。老黑又玩出新意了啊。

还行的吧

马黑黑 发表于 2022-6-9 11:40

红影 发表于 2022-6-9 08:21
看到初始设置0.2 这个比较靠谱，可选值从0-5有点大了，能差5秒，这反应得多迟钝。我觉得0-1就足够了{:4_1 ...

手慢不会慢到五秒，设置在那里而已，到时再改改

马黑黑 发表于 2022-6-9 11:41

红影 发表于 2022-6-9 08:25
这个帖子里有底板设计、彩色边框、鼠标划过旋转高跟鞋，还有改进版歌词制作。可学的东西很多

说的那么多，很简单的一个帖子而已哈

加林森 发表于 2022-6-9 12:03

马黑黑 发表于 2022-6-9 11:39
还行的吧

当然行了啊。

马黑黑 发表于 2022-6-9 12:05

加林森 发表于 2022-6-9 12:03
当然行了啊。

行就好行就好

加林森 发表于 2022-6-9 12:43

马黑黑 发表于 2022-6-9 12:05
行就好行就好

嗯嗯

马黑黑 发表于 2022-6-9 13:00

加林森 发表于 2022-6-9 12:43
嗯嗯

{:5_108:}

加林森 发表于 2022-6-9 13:23

马黑黑 发表于 2022-6-9 13:00


准备出去锻炼了。你慢慢玩。

马黑黑 发表于 2022-6-9 18:00

加林森 发表于 2022-6-9 13:23
准备出去锻炼了。你慢慢玩。

我还要工作的

小辣椒 发表于 2022-6-9 18:03

哇塞，还有这么耀眼的一双高跟鞋{:4_187:}

小辣椒 发表于 2022-6-9 18:03

黑黑的速度是太神速了{:4_178:}

加林森 发表于 2022-6-9 18:20

马黑黑 发表于 2022-6-9 18:00
我还要工作的

嗯嗯

马黑黑 发表于 2022-6-9 21:27

加林森 发表于 2022-6-9 18:20
嗯嗯

弄个钱养家

查看完整版本: 红色高跟鞋