小辣椒 发表于 2022-7-1 21:46

小桥流水 - 金晶（学习黑黑的泡泡效果）


<style>
.papa { margin: auto; width: 1200px; height: 740px; left: -320px; top: 150px;border-radius: 4px; border: 1px solid rgba(0,0,0,.5); overflow: hidden; position: relative; }
.papa::before { content: ''; right: 260px; top: 150px; 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: 50px; 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/62beb4281d64b07066ee6b60.jpg" alt = "" />
      <img src="https://pic.imgdb.cn/item/62beb6361d64b07066f267f9.png" 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://music.163.com/song/media/outer/url?id=5240781.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 = [
      ['0.01','小桥流水 - 金晶'],
      ['30.00','童音欣赏'],
      ['100.05','学习黑黑的水泡效果'],
      ['180','欣赏音乐 分享快乐']
];

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>
<br><br><br><br><br><br><br><br><br><br>

樵歌 发表于 2022-7-1 22:03

喝个大彩就下了，88{:4_182:}

小辣椒 发表于 2022-7-1 22:04

樵歌 发表于 2022-7-1 22:03
喝个大彩就下了，88

樵哥哥一起下，10点了

红影 发表于 2022-7-1 22:15

真有意思，小女孩戴个大墨镜。童音歌曲好听{:4_187:}

马黑黑 发表于 2022-7-1 22:47

小桥流水人家，古道西风瘦马{:4_199:}

加林森 发表于 2022-7-1 23:11

城管来啦，下去睡觉！{:4_203:}

上海朝阳 发表于 2022-7-2 07:32

哈哈，我到处点点就没见这秋林打开，我以为这秋色是门帘，打开里面是春色，可都不动，这不可能呀，看见红影说有个戴墨镜的小姑娘唱歌，我赶紧换极速，小姑娘出来啦，甜甜的

樵歌 发表于 2022-7-2 08:36

小辣椒 发表于 2022-7-1 22:04
樵哥哥一起下，10点了

貌似是小辣椒小时候的片片做的{:4_189:}
页: [1]
查看完整版本: 小桥流水 - 金晶（学习黑黑的泡泡效果）