加林森 发表于 2022-6-30 17:52

《草原请你来》- 龚玥 （根据老黑的教程制作）


<style>

.papa { left: -214px; width: 1024px; height: 640px; border-radius: 4px; border: 1px solid rgba(0,0,0,.5); overflow: hidden; position: relative; }
.papa::before { content: ''; right: 160px; top: 80px; width: 460px;height: 460px;background: #ccc; animation: rot 6s linear infinite alternate;border-radius: 50%;background: linear-gradient(65deg, black, tan, green, red); mask-image: radial-gradient(transparent 40%, #eee); -webkit-mask-image: radial-gradient(transparent 40%, #eee); position: absolute; }
.papa img { width: 100%; height: 100%; border-radius: inherit; }
.papa img:first-child { position: absolute; mix-blend-mode: multiply; }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; top: 10px; left: 10px; padding: 10px; width: fit-content; font: normal 1em sans-serif; color: tan; 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; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
@keyframes rot { to { transform: rotate(1turn) scale(1.5); } }

</style>

<div class="papa">
        <img src="https://pic.imgdb.cn/item/62bd6bfc1d64b07066375e6b.jpg" alt = "" />
        <img src="https://pic.imgdb.cn/item/62bd6d2e1d64b07066399bd8.jpg" alt = "" />
        <div class="playbox">
                <p id="geci" style="font-size: 1.2em">LRC Loading ... </p>
                <p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
                        <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>
</div>
<audio id="aud" src="https://www.joy127.com/url/90988.mp3" autoplay="autoplay" loop="loop"></audio>

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

let lrcAr = [

        ['5.78','草原请你来 - 龚玥'],
        ['8.02','词：刘新圈'],
        ['9.71','曲：石焱'],
        ['38.70','那是谁的爱'],
        ['42.34','重新被拾起'],
        ['46.06','一首牧歌'],
        ['50.21','留下多少传奇'],
        ['54.24','苍狼和白鹿'],
        ['57.90','一股英雄气'],
        ['62.06','流动在草原人'],
        ['65.99','滚烫的脉搏里'],
        ['70.01','岁月里温热'],
        ['73.83','记忆里熟悉'],
        ['77.76','是谁打马而过'],
        ['81.67','匆匆来又去'],
        ['85.62','风一样驰骋'],
        ['89.59','花一样盛开'],
        ['93.43','草原如瀚海'],
        ['97.44','生命如潮汐'],
        ['101.46','草原请你来'],
        ['105.30','幸福千万里'],
        ['109.21','醉倒是快乐'],
        ['113.22','醒来是甜蜜'],
        ['117.16','看过大草原'],
        ['121.07','地阔天也高'],
        ['125.09','从此心海坦荡荡'],
        ['128.95','一望无际'],
        ['168.50','岁月里温热'],
        ['172.21','记忆里熟悉'],
        ['176.18','是谁打马而过'],
        ['179.76','匆匆来又去'],
        ['184.01','风一样驰骋'],
        ['187.95','花一样盛开'],
        ['191.83','草原如瀚海'],
        ['195.89','生命如潮汐'],
        ['199.75','草原请你来'],
        ['203.67','风吹千万里'],
        ['207.60','蓝的是天空'],
        ['211.57','绿的是大地'],
        ['215.50','汉子多豪爽'],
        ['219.41','姑娘多美丽'],
        ['223.40','醇香的马奶酒'],
        ['227.35','杯杯都见底'],
        ['231.31','草原请你来'],
        ['235.20','风吹千万里'],
        ['239.10','蓝的是天空'],
        ['243.07','绿的是大地'],
        ['246.98','汉子多豪爽'],
        ['250.89','姑娘多美丽'],
        ['255.06','醇香的马奶酒'],
        ['258.71','杯杯都见底'],
        ['261.82','啊...哎'],
        ['267.80','杯杯都见底'],
      ['280.60','送老黑欣赏！']
];


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-30 17:52

@马黑黑

小辣椒 发表于 2022-6-30 17:59

队长速度的，又一个漂亮的制作{:4_199:}

加林森 发表于 2022-6-30 18:10

小辣椒 发表于 2022-6-30 17:59
队长速度的，又一个漂亮的制作

谢谢小辣椒支持！{:4_190:}

马黑黑 发表于 2022-6-30 18:17

队长改玩鹰为玩球啦{:4_170:}

加林森 发表于 2022-6-30 18:51

马黑黑 发表于 2022-6-30 18:17
队长改玩鹰为玩球啦

跟到你超。。。。。{:4_205:}

马黑黑 发表于 2022-6-30 19:04

加林森 发表于 2022-6-30 18:51
跟到你超。。。。。

腻害腻害

加林森 发表于 2022-6-30 19:18

马黑黑 发表于 2022-6-30 19:04
腻害腻害

是你厉害吧。

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

变动的大气泡很漂亮，这种滤镜下，人物好像变虚了呢。{:4_204:}

醉美水芙蓉 发表于 2022-6-30 19:45

马黑黑 发表于 2022-6-30 20:20

加林森 发表于 2022-6-30 19:18
是你厉害吧。

我一般般

加林森 发表于 2022-6-30 20:28

红影 发表于 2022-6-30 19:26
变动的大气泡很漂亮，这种滤镜下，人物好像变虚了呢。

好看不？

加林森 发表于 2022-6-30 20:28

醉美水芙蓉 发表于 2022-6-30 19:45
非常漂亮！欣赏队长佳作！

谢谢水芙蓉！{:4_190:}

加林森 发表于 2022-6-30 20:29

马黑黑 发表于 2022-6-30 20:20
我一般般

跟你超没错的。

马黑黑 发表于 2022-6-30 20:34

加林森 发表于 2022-6-30 20:29
跟你超没错的。

不上错车就好{:4_170:}

加林森 发表于 2022-6-30 21:09

马黑黑 发表于 2022-6-30 20:34
不上错车就好

不会的。。。。{:4_189:}

马黑黑 发表于 2022-6-30 21:37

加林森 发表于 2022-6-30 21:09
不会的。。。。

中途可以下车

加林森 发表于 2022-6-30 21:43

马黑黑 发表于 2022-6-30 21:37
中途可以下车

干杯！{:4_191:}

马黑黑 发表于 2022-6-30 21:53

加林森 发表于 2022-6-30 21:43
干杯！

{:4_180:}

加林森 发表于 2022-6-30 21:54

马黑黑 发表于 2022-6-30 21:53


谢茶！
页: [1] 2
查看完整版本: 《草原请你来》- 龚玥 （根据老黑的教程制作）