论坛 › 欢乐水吧 › 糖纸（学习黑黑版lrc歌词制作）

红影 发表于 2022-6-8 22:14

糖纸（学习黑黑版lrc歌词制作）

<style>
.mama { left: -214px;top:120px; width: 1024px; height: 592px; background: #eee url('https://pic.imgdb.cn/item/62a08c29094754312952614d.jpg') no-repeat; position: relative;overflow: hidden; }

.mama::before {
        content: '';
        position: absolute;
        width: 112px;
        height: 95.2px;
      top:300px;
      left: 285px;
        background: url('https://pic.imgdb.cn/item/62a0973c094754312961d072.gif') no-repeat center/cover;
        opacity: .95;
}

#lrcDiv_outer { position: absolute; left: 370px; top: 90px; width: fit-content; height: fit-content; padding: 10px 14px; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 0px 0px 4px #4828C7; border-radius: 50%; cursor: pointer;}

#lrcDiv_inner { width: 280px; 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: lightgreen; text-shadow: 1px 1px 1px #333; list-style-type: none;text-align: center;}

.meter { position: absolute; top: 107px; left: 400px; width: 296px; transform: rotate(-90deg); cursor: pointer; }

.gaog {
        font-family: '微软雅黑';
        font-weight: 900;
        font-size: 3rem;
        text-align: center;
        color: transparent;
        background-color: #e8a95b;
        background-clip: text;
        -webkit-background-clip: text;
        position: absolute;
      left:40px;top:-20px;
}
.gaog::after {
    content: attr(data-text);
    position: absolute;
    left: 108px;
    top: 108px;
    left: 1px;
    top: -1px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem, rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255, 0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 150% 100%;
    background-repeat: no-repeat;
    animation: shine1 5s infinite linear;
}
@keyframes shine1 {
        0% { background-position: 50% 0; }
        100% { background-position: -130% 0; }
}
</style>

<div class="mama">
<div style="margin: auto; width: 400px; height: 200px;line-height: 200px;">
        <p class="gaog" data-text="糖纸-王筝">糖纸-王筝</p></div>
        <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>

      <div style="position: absolute; left:600px; top: 50px; width:690px;">
                <img alt="" src="https://pic.imgdb.cn/item/62a09aa50947543129666cf8.gif"/></div>

</div><br><br><br><br><br><br>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=297667.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let aud = document.querySelector('.aud'),
        meter = document.querySelector('.meter'),
        lrcUl = document.getElementById('lrcUl');
let slip = 0.25; //误差补救 单位秒
let lrcAr = [
        ['0.05','《糖纸》-王筝'],
        ['4.05','学习黑黑版lrc制作'],
        ['8.05','我随风飞舞'],
        ['11.45','在空中跳着舞'],
        ['14.87','你微笑着抛开我'],
        ['18.26','我并不在乎'],
        ['21.69','轻轻的旋转'],
        ['25.09','飘离了你视线'],
        ['28.51','飞过人们的身边'],
        ['32.00','像只蝴蝶'],
        ['35.08','我是一片糖纸'],
        ['38.54','刚离开你的唇边'],
        ['42.24','寂寞的发现'],
        ['44.52','这城市阳光很刺眼'],
        ['48.87','我只是一片糖纸'],
        ['52.19','曾经我的心很甜'],
        ['56.04','现在只能随风'],
        ['58.79','飞到别的世界'],
        ['62.81','美丽的飞舞'],
        ['66.25','像风一样自由'],
        ['69.73','永远的怀念'],
        ['72.92','你手心的温暖'],
        ['76.30','如果不曾尝过那种甜'],
        ['79.30','就不会惦记那味道'],
        ['82.30','可是已经有过的暖'],
        ['85.30','又如何能忘掉'],
        ['88.30','爱情就像糖果衣'],
        ['92.30','里面包裹的是残忍'],
        ['95.30','你最后的笑容'],
        ['98.30','是永不褪色的风景'],
        ['101.30','分手时的满不在乎'],
        ['104.30','包含着几多痛楚'],
        ['107.41','我是一片糖纸'],
        ['110.60','刚离开你的唇边'],
        ['114.31','寂寞的发现'],
        ['116.67','这城市阳光很刺眼'],
        ['121.02','我只是一片糖纸'],
        ['124.29','曾经我的心很甜'],
        ['127.98','现在只能随风'],
        ['130.82','飞到别的世界'],
        ['134.73','我是一片糖纸'],
        ['138.01','刚离开你的唇边'],
        ['141.75','寂寞的发现'],
        ['144.04','这城市阳光很刺眼'],
        ['148.37','我只是一片糖纸'],
        ['151.77','曾经我的心很甜'],
        ['155.47','现在只能随风'],
        ['158.27','飞到别的世界'],
        ['165.93','我随风飞舞'],
        ['169.11','在空中跳着舞'],
        ['172.57','你微笑着抛开我'],
        ['175.99','我并不在乎'],
        ['179.47','美丽的飞舞'],
        ['182.88','像风一样自由'],
        ['186.36','永远的怀念'],
        ['189.50','你手心的温暖'],
        ['194.36','制作：红影2022.6.8']
];

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

Array.from({length: 5}).forEach((ele,key) => {
        ele = document.createElement('span');
        ele.className = 'leaf';
        ele.style.transform = 'rotate(' + key * 72 + 'deg) translateY(100px)';
        document.querySelector('.mama').appendChild(ele);
});

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 - slip){
                        if(j > 0){
                                let idxLast = lrcAr;
                                document.getElementById('li' + idxLast).style.color = 'lightgreen';
                                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 = 'lightgreen';
        lrcUl.style.top = 0;
})

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

红影 发表于 2022-6-8 22:17

顺便学习一下高光字的制作，黑黑的LRC真好，文字集中营也特别好，每次想用文字效果就会想起那个集中营。
这个高光字还没做过呢，正好也学习一下。谢谢黑黑的代码@马黑黑 {:4_187:}

红影 发表于 2022-6-8 22:18

那女孩手上本来放了一张糖纸，怎么看都不好看，只能换成蝴蝶了{:4_173:}

马黑黑 发表于 2022-6-8 22:29

糖纸都变成糖蝴蝶了这是

马黑黑 发表于 2022-6-8 22:30

一直想着做个显示歌词的类似镜面的样式，一直没动手尝试，不曾想影子做出来了，很赞！

加林森 发表于 2022-6-8 22:36

https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic17.997788.com%2F_pic_search%2F00%2F16%2F62%2F41%2F16624110.jpg&refer=http%3A%2F%2Fpic17.997788.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?
这个糖纸怎么样？

小辣椒 发表于 2022-6-9 00:52

亲爱的，好棒，黑黑的css知识面已经掌握的很好了{:4_178:}

醉美水芙蓉 发表于 2022-6-9 07:00

红影 发表于 2022-6-9 10:00

马黑黑 发表于 2022-6-8 22:29
糖纸都变成糖蝴蝶了这是

歌词里就是这样说的啊，被吃完丢弃的糖纸就像蝴蝶飞舞在空中{:4_173:}

红影 发表于 2022-6-9 10:01

马黑黑 发表于 2022-6-8 22:30
一直想着做个显示歌词的类似镜面的样式，一直没动手尝试，不曾想影子做出来了，很赞！

上次问你歌词怎样居中，就是想弄个这样的形状。得到黑黑的解答才能做出来，还应该谢谢黑黑才是呢{:4_187:}

红影 发表于 2022-6-9 10:02

加林森 发表于 2022-6-8 22:36
这个糖纸怎么样？

我找的糖纸比这个还好看呢，但放到人物手上还是不行{:4_173:}

红影 发表于 2022-6-9 10:03

小辣椒 发表于 2022-6-9 00:52
亲爱的，好棒，黑黑的css知识面已经掌握的很好了

现在黑黑那个修整版的LRC已经很完美了，忍不住就又做了个帖子{:4_173:}

红影 发表于 2022-6-9 10:03

醉美水芙蓉 发表于 2022-6-9 07:00
红影对代码很熟悉了，做得真漂亮！

谢谢水芙蓉美女的鼓励，我们大家一起学习{:4_187:}

加林森 发表于 2022-6-9 10:42

红影 发表于 2022-6-9 10:02
我找的糖纸比这个还好看呢，但放到人物手上还是不行

哦

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

红影 发表于 2022-6-9 10:01
上次问你歌词怎样居中，就是想弄个这样的形状。得到黑黑的解答才能做出来，还应该谢谢黑黑才是呢{:4_187: ...

挺好的挺好的

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

红影 发表于 2022-6-9 10:00
歌词里就是这样说的啊，被吃完丢弃的糖纸就像蝴蝶飞舞在空中

嗯，糖纸也是有进化的升华的

红影 发表于 2022-6-9 16:47

马黑黑 发表于 2022-6-9 11:25
嗯，糖纸也是有进化的升华的

本来是挺忧伤的一首歌，咋变成糖纸的进化了{:4_189:}

马黑黑 发表于 2022-6-9 17:58

红影 发表于 2022-6-9 16:47
本来是挺忧伤的一首歌，咋变成糖纸的进化了

升华了就进化了，这叫蜕变

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

红影 发表于 2022-6-9 10:03
现在黑黑那个修整版的LRC已经很完美了，忍不住就又做了个帖子

昨天我回家晚了，做了一个电脑预览好的，加帖里面没有了{:4_201:}

红影 发表于 2022-6-9 22:34

马黑黑 发表于 2022-6-9 17:58
升华了就进化了，这叫蜕变

成妖了{:4_173:}

查看完整版本: 糖纸（学习黑黑版lrc歌词制作）