小辣椒 发表于 2022-9-17 15:45

天边 - 廖昌永

<style>
#papa { left:-344px; width: 1280px; height: 750px; top: 150px; background: gray url('https://wj.zp68.com/lxx/yunhua/2022/09/14/lyctb.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display:grid; place-items: center; user-select: none; overflow: hidden; position: relative; z-index: 1; }
#mplayer { position: absolute; bottom: 50px; right: 300px; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 8px; z-index: 9; }
#btnwrap { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #ccc linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75)); cursor: pointer; }
#btnwrap:hover { background: #000 linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75)); }
#btnplay { width: 20px; height: 20px; background: #ccc; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { width: 500px; height: 2px; background: #ccc linear-gradient(to right,red,orange,green,tomato) no-repeat; background-size: 1px 2px; cursor: pointer; position: relative;}
#prog::before { position: absolute; content: ''; top: -7px; width: inherit; height: 25px; }
#prog:hover::before { background: rgba(0,200,200,.15); }
#tmsg { font: normal 16px sans-serif; color: lightblue;}
#lrc { position: absolute; left: 470px; bottom: 300px; font: bold 2em sans-serif; color: Beige; text-shadow: 1px 1px 2px #000; text-align: center; }
#lrc:hover, #tmsg:hover { color: snow; }
#vid { position: absolute; width: 1280px; height: 815px; top: -65px; object-fit: cover; opacity: 0.45; }
#dt{ position: absolute; width: 125px; height: 111px; top: 140px; left: 550px; }
#dt1{ position: absolute; width: 63px; height: 55px; top: 120px; left: 400px; }
#dt2{ position: absolute; width: 63px; height: 55px; top: 250px; left: 250px; }
<style>
#papa { left: 14px; width: 1280px; height: 750px; top: 150px; background: gray url('https://wj.zp68.com/lxx/yunhua/2022/09/14/lyctb.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display:grid; place-items: center; user-select: none; overflow: hidden; position: relative; z-index: 1; }
#mplayer { position: absolute; bottom: 50px; right: 300px; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 8px; z-index: 9; }
#btnwrap { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #ccc linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75)); cursor: pointer; }
#btnwrap:hover { background: #000 linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75)); }
#btnplay { width: 20px; height: 20px; background: #ccc; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { width: 500px; height: 2px; background: #ccc linear-gradient(to right,red,orange,green,tomato) no-repeat; background-size: 1px 2px; cursor: pointer; position: relative;}
#prog::before { position: absolute; content: ''; top: -7px; width: inherit; height: 25px; }
#prog:hover::before { background: rgba(0,200,200,.15); }
#tmsg { font: normal 16px sans-serif; color: lightblue;}
#lrc { position: absolute; left: 470px; bottom: 300px; font: bold 2em sans-serif; color: Beige; text-shadow: 1px 1px 2px #000; text-align: center; }
#lrc:hover, #tmsg:hover { color: snow; }
#vid { position: absolute; width: 1280px; height: 815px; top: -65px; object-fit: cover; opacity: 0.25; }
#dt{ position: absolute; width: 125px; height: 111px; top: 140px; left: 550px; }
#dt1{ position: absolute; width: 63px; height: 55px; top: 120px; left: 400px; }
#dt2{ position: absolute; width: 63px; height: 55px; top: 250px; left: 250px; }

</style>

<div id="papa">

      <img id="dt" src="https://pic.imgdb.cn/item/6247e3c027f86abb2a56f17a.gif" alt="" />
       <img id="dt1" src="https://pic.imgdb.cn/item/6247e3c027f86abb2a56f17a.gif" alt="" />
       <img id="dt2" src="https://pic.imgdb.cn/item/6247e3c027f86abb2a56f17a.gif" alt="" />
      <video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/02/01/5b4f55c95539b.mp4" muted="muted" autoplay="autoplay" loop="loop"></video>
      <div id="mplayer"><span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div>
      <div id="lrc">天边 - 廖昌永</div>
</div>

<script>
let lrcAr = [
                ['0.00','天边 - 廖昌永'],
        ['8.40','词：吉日格楞'],
        ['17.07','曲：乌兰托嘎'],
        ['33.58','天边有一对双星'],
        ['42.18','那是我梦中的眼睛'],
        ['50.57','山中有一片晨雾'],
        ['58.73','那是你昨夜的柔情'],
        ['67.43','我要登上'],
        ['71.37','登上山顶'],
        ['75.11','去寻觅雾中的身影'],
        ['83.61','我要跨上'],
        ['87.67','跨上骏马'],
        ['91.04','去追逐遥远的星星'],
        ['101.72','星星'],
        ['110.69','天边有一颗大树'],
        ['118.97','那是我心中的绿荫'],
        ['126.89','远方有一座高山'],
        ['135.19','那是你博大的胸襟'],
        ['143.69','我要树下'],
        ['147.73','树下采集'],
        ['151.74','去编织美丽的憧憬'],
        ['159.92','我要山下'],
        ['164.26','山下放牧'],
        ['167.96','去追寻你的足迹'],
        ['176.73','足迹'],
        ['183.02','歌词编辑：小辣椒'],
        ['200.25','我愿与你策马同行'],
        ['207.66','奔驰在草原的深处'],
        ['215.92','我愿与你展翅飞翔'],
        ['224.27','遨游在蓝天的穹谷'],
        ['233.54','穹谷'],
        ['237.13','谢谢欣赏！'],
        ['260.57','谢谢欣赏！']
];
let aud = new Audio();
aud.src = 'https://wj.zp68.com/lxx/yunhua/2022/09/14/lyctb.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
      prog.style.backgroundSize = prog.offsetWidth * aud.currentTime / aud.duration + 'px 2px';
      tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
      for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
      }
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val)=> {
      if (!val) return '00:00';
      val = Math.floor(val);
      let min = parseInt(val / 60), sec = parseFloat(val % 60);
      if(min < 10) min = '0' + min;
      if(sec < 10) sec = '0' + sec;
      return min + ':' + sec;
}
</script>
<br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-9-17 15:47

@加林森

队长同玩大鹰做一个{:4_187:}

加林森 发表于 2022-9-17 15:55

小辣椒 发表于 2022-9-17 15:47
@加林森

队长同玩大鹰做一个

我等会就回家了。现在还在回家路上。

小辣椒 发表于 2022-9-17 15:57

加林森 发表于 2022-9-17 15:55
我等会就回家了。现在还在回家路上。

队长好，不急，慢慢来，同玩一个加大鹰的

加林森 发表于 2022-9-17 15:59

小辣椒 发表于 2022-9-17 15:57
队长好，不急，慢慢来，同玩一个加大鹰的

好的好的。

梦油 发表于 2022-9-17 17:05

队长的鹰飞到小辣椒朋友的领地来啦{:4_189:}
漂浮的云好美。
还是名演员的演唱对听众更有吸引力。

红影 发表于 2022-9-17 19:19

亲爱的加了这么多鹰啊，这个背景大气，还有视频的动态云呢，真漂亮{:4_199:}

梦缘 发表于 2022-9-18 20:39

美图欣赏，大鹰翱翔，好看好听！

梦缘 发表于 2022-9-18 20:39

老师的帖制作精美，欣赏点赞！{:4_204:}
页: [1]
查看完整版本: 天边 - 廖昌永