红影 发表于 2022-6-29 22:07

秋意浓 to 队长

<style>
.hy { left: -214px; top:120px; width: 1024px; height: 640px; background: rgba(0,0,0,.6) url('https://pic.imgdb.cn/item/62bc57c81d64b07066bec69e.jpg') no-repeat center / cover; box-shadow: 0 2px 30px #000; overflow: hidden; position: relative; perspective: 1000px; }
.hy input { border: none; outline: none; opacity: .75; cursor: pointer; }
.hy p { margin: 0; padding: 0; }
.playbox { position: absolute; top: 480px; left: 80px; padding: 10px; width: fit-content; font: normal 1em sans-serif; color: ghostwhite; background: rgba(255,255,255,.25); backdrop-filter: blur(2px); overflow: hidden; box-shadow: 1px 2px 2px #000; text-shadow: 1px 1px 1px #000; z-index: 100; border-radius:6px;}
.ball { right: 15px;bottom: 2px;width: 500px;height: 500px;background: #ccc;position: relative;animation: rot 10s linear infinite;border-radius: 50%;background: snow linear-gradient(65deg, black, tan, teal, tomato, green, red, white);mask-image: radial-gradient(transparent 60%, #eee);
-webkit-mask-image: radial-gradient(transparent 50%, #eee);position: absolute; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
@keyframes rot { to { transform: rotate(1turn); } }
.vid { position: absolute; top: -55px; width: 1024px; height: 695px; object-fit: cover;mix-blend-mode: screen;}
</style>

<div class="hy">
      <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec495391393a.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
        <div class="ball"></div>
        <div class="playbox">
                <p id="geci" style="font-size: 1.2em;color: #ffffcc;">LRC Loading ... </p>
                <p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;color: #ffffcc;">
                        <input id="btnplay" type="button" value=">" />
                        <input id="slider" type="range" min="0" max="100" value="0" />
                        <span id="per">0:0 | 0:0</span>
                </p>
        </div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=190473.mp3" autoplay="autoplay" loop="loop"></audio>
</div><br><br><br><br><br><br><br><br><br><br>

<script>
let slider = document.querySelector('#slider'),
        aud = document.querySelector('#aud'),
        per = document.querySelector('#per'),
        btnplay = document.querySelector('#btnplay'),
        geci = document.querySelector('#geci');
let slip = 1;

let lrcAr = [
        ['0.20','秋意浓—张学友'],
        ['10.23','制作：红影 回赠队长好礼'],
        ['23.23','花潮LRC在线：马黑黑'],
        ['36.23','秋意浓'],
        ['41.17','离人心上秋意浓'],
        ['48.74','一杯酒'],
        ['52.52','情绪万种'],
        ['61.05','离别多'],
        ['65.39','叶落的季节离别多'],
        ['72.77','握住你的手'],
        ['75.99','放在心头'],
        ['79.13','我要你记得'],
        ['82.17','无言的承诺'],
        ['85.69','啊~不怕相思苦'],
        ['95.50','只怕你伤痛'],
        ['102.24','怨只怨人在风中'],
        ['105.97','聚散都不由我'],
        ['110.14','啊~   不怕我孤单'],
        ['120.05','只怕你寂寞'],
        ['126.74','无处说离愁'],
        ['134.89','舞秋风'],
        ['139.41','漫天回忆舞秋风'],
        ['147.14','叹一声'],
        ['150.90','黯然沉默'],
        ['159.51','不能说'],
        ['163.87','惹泪的话都不能说'],
        ['171.05','紧紧拥着你'],
        ['174.51','永远记得'],
        ['177.49','你曾经为我'],
        ['180.36','这样的哭过'],
        ['183.91','啊~不怕相思苦'],
        ['193.81','只怕你伤痛'],
        ['200.46','怨只怨人在风中'],
        ['204.16','聚散都不由我'],
        ['208.37','啊~   不怕我孤单'],
        ['218.17','只怕你寂寞'],
        ['224.61','无处说离愁'],
        ['282.70','啊~不怕相思苦'],
        ['292.69','只怕你伤痛'],
        ['299.25','怨只怨人在风中'],
        ['302.88','聚散都不由我'],
        ['307.17','啊~   不怕我孤单'],
        ['317.04','只怕你寂寞'],
        ['323.48','无处说离愁'],
        ['332.48','感谢聆听']
];
slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');

aud.addEventListener('timeupdate', () => {
        let prog = 100 * aud.currentTime / aud.duration;
        slider.value = prog;
        per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
                for(j=0; j<lrcAr.length; j++){
                if(aud.currentTime >= lrcAr - slip){
                        geci.innerHTML = lrcAr;
                }
        }
});

let toMin = (sec) => {
        if(!sec) return '0:00';
        sec = parseInt(sec);
        return parseInt(sec / 60) + ':' + parseFloat(sec % 60).toString().padStart(2,'0');
}
</script>

红影 发表于 2022-6-29 22:08

@加林森感谢队长赠送的帖子，影子回个小礼{:4_204:}

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

夏未过，秋意已浓{:4_199:}

红影 发表于 2022-6-29 22:10

学习做一下黑黑的彩球。黑黑的花潮LRC真好用，我懒了一下，直接去网上找的歌词转换的，发现有点对不上，直接用代码里的语句偏移了1秒，结果就可以了{:4_173:}@马黑黑

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

红影 发表于 2022-6-29 22:10
学习做一下黑黑的彩球。黑黑的花潮LRC真好用，我懒了一下，直接去网上找的歌词转换的，发现有点对不上，直 ...

转换制作的时候，也可以设置偏移

红影 发表于 2022-6-29 22:15

马黑黑 发表于 2022-6-29 22:09
夏未过，秋意已浓

感谢黑黑的代码和歌词转换{:4_187:}

红影 发表于 2022-6-29 22:15

马黑黑 发表于 2022-6-29 22:11
转换制作的时候，也可以设置偏移

我把这个给忘了，在帖子里直接听，发现问题后就在帖子里调整了，也很方便的呢{:4_187:}

小辣椒 发表于 2022-6-29 22:27

这个视频背景好，有点像特效的感觉{:4_199:}

加林森 发表于 2022-6-29 22:32

红影 发表于 2022-6-29 22:08
@加林森感谢队长赠送的帖子，影子回个小礼

谢谢啦。红影这个是大礼了？

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

红影 发表于 2022-6-29 22:15
我把这个给忘了，在帖子里直接听，发现问题后就在帖子里调整了，也很方便的呢

帖子模板也留有偏移变量

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

红影 发表于 2022-6-29 22:15
感谢黑黑的代码和歌词转换

额，哪些只是工具，工具就是需要人们去用的

加林森 发表于 2022-6-29 22:59

刚才是手机，现在上电脑了。谢谢红影了！

醉美水芙蓉 发表于 2022-6-30 18:17

四海八荒 发表于 2022-6-30 18:42

这个夏天太热了，真有点怀念秋天的凉爽

红影 发表于 2022-6-30 20:26

小辣椒 发表于 2022-6-29 22:27
这个视频背景好，有点像特效的感觉

亲爱的，我又调整了一下，前面的太暗了{:4_173:}

红影 发表于 2022-6-30 20:27

加林森 发表于 2022-6-29 22:32
谢谢啦。红影这个是大礼了？

算不上大礼啊，只是学习制作而已{:4_173:}

红影 发表于 2022-6-30 20:28

马黑黑 发表于 2022-6-29 22:38
帖子模板也留有偏移变量

是啊，有各种偏移量的设置真的太方便了{:4_199:}

红影 发表于 2022-6-30 20:29

马黑黑 发表于 2022-6-29 22:39
额，哪些只是工具，工具就是需要人们去用的

那就感谢黑黑带来的这些美好工具{:4_173:}

绿叶清舟 发表于 2022-6-30 20:29

影这个片片做得有味道

红影 发表于 2022-6-30 20:30

醉美水芙蓉 发表于 2022-6-30 18:17
真漂亮！谢谢红影美女分享！

谢谢水芙蓉美女，我只是跟在黑黑后面学习代码呢{:4_173:}
页: [1] 2 3
查看完整版本: 秋意浓 to 队长