论坛 › 欢乐水吧 › 谁在窗外流泪--歌手：小骆驼（学习黑黑教程分享）

小辣椒 发表于 2022-9-15 20:07

谁在窗外流泪--歌手：小骆驼（学习黑黑教程分享）

<style>
#papa { left: -344px; width: 1280px; height: 650px; top: 150px; background: tan url('https://wj.zp68.com/lxx/yunhua/2022/09/14/liul.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
#mplayer { position: absolute; left: 600px; bottom: 20px; width: 300px; height: 80px; user-select: none; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
#mplayer:hover #btnwrap { background: linear-gradient(to top right, red, green); border-radius: 50%; opacity: .75; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center;transition: .5s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border: 1px solid tan; border-radius: 6px; opacity: .25; }
#btnplay { width: 20px; height: 20px; background: #eee; 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 { --yy: 20px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, orange, red 100%, transparent 0); border: 1px solid gray; font: normal 14px / 16px sans-serif; color: white;opacity: .75; }
#lrc { --dur: 6s; position: absolute; top: 310px;left: 814px; font: bold 2em sans-serif; color: transparent; letter-spacing: 2px; background: linear-gradient(-90deg, darkred, gold, orange, snow) 100% 0 / 200% 100%; background-clip: text; -webkit-background-clip: text; }

#d1{ position: absolute; width: 140px; height: 180px; top: 10px; left: 1110px;opacity: 0.45; }
#d2{ position: absolute; width: 32px; height: 32px; top: 150px; left: 910px;opacity: 0.85; }
#d3{ position: absolute; width: 32px; height: 32px; top: 120px; left: 380px;opacity: 0.65; }
#zm{ position: absolute; width: 32px; height: 32px; top: 160px; left:480px;opacity: 0.65; }

@keyframes bgMerg1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes bgMerg2 { from { background-position: 0 0; } to { background-position: -100% 0; } }

<div id="papa">

</style>

<div id="papa">
<img id="d1" src="https://pic.imgdb.cn/item/6323107c16f2c2beb1524b53.gif" alt="" />
<img id="d2" src="https://pic.imgdb.cn/item/62f2339516f2c2beb1dd69ad.gif" alt="" />
<img id="d3" src="https://pic.imgdb.cn/item/62f2339516f2c2beb1dd69ad.gif" alt="" />
<img id="zm" src="https://pic.imgdb.cn/item/62f2339516f2c2beb1dd69ad.gif" alt="" />

      <div id="lrc">谁在窗外流泪</div>
      <div id="mplayer">
                <div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
                <div id="prog">00:00 | 00:00</div>
      </div>
</div>

<script>
let lrcAr = [
      ['00.00','谁在窗外流泪 '],
        ['13.73','歌手： 小骆驼'],
        ['25.20','曲/词：刀郎'],
        ['37.51','看着窗外烟雨中'],
        ['41.00','依旧车水马龙'],
        ['45.92','始终无法清晰的记起'],
        ['51.03','昨夜谁入梦'],
        ['55.44','毕竟心里也不敢轻易去碰'],
        ['61.00','刚愈合的痛'],
        ['64.82','你再忍一忍'],
        ['69.66','你再等一等'],
        ['77.15','是谁把我昨夜的泪水'],
        ['80.81','全装进酒杯'],
        ['85.50','是否能用这短短的一夜'],
        ['89.87','把痛化做无悔'],
        ['95.37','毕竟泪不是飘落在窗外'],
        ['99.18','无心的雨水'],
        ['104.58','只要被打碎'],
        ['108.91','就会随风飞'],
        ['114.91','LRC编辑：小辣椒'],
        ['134.95','谁在窗外流泪'],
        ['138.74','流的我心碎'],
        ['143.24','雨打窗听来这样的伤悲'],
        ['148.10','刹那间拥抱你给我的美'],
        ['152.79','尽管准备了千万种面对'],
        ['156.95','谁曾想会这样心碎'],
        ['164.36','谁在窗外流泪'],
        ['168.62','流得我心碎'],
        ['173.25','情路上一朵雨打的玫瑰'],
        ['178.12','凋零在爱与恨的负累'],
        ['182.55','就让痛与悲哀与伤化做雨水'],
        ['189.31','随风飘飞'],
        ['195.97','LRC编辑：小辣椒'],
        ['231.61','谁在窗外流泪'],
        ['235.88','流的我心碎'],
        ['240.81','雨打窗听来这样的伤悲'],
        ['245.16','刹那间拥抱你给我的美'],
        ['249.66','尽管准备了千万种面对'],
        ['253.88','谁曾想会这样心碎'],
        ['261.55','谁在窗外流泪'],
        ['265.41','流得我心碎'],
        ['270.19','情路上一朵雨打的玫瑰'],
        ['275.10','凋零在爱与恨的负累'],
        ['279.68','就让痛与悲哀与伤化做雨水'],
        ['285.98','随风飘飞'],
        ['291.69','随风飘飞']
];
let aud = new Audio() ,lrcKey = 0;
let setColor = () => Math.random().toString(16).substr(-6);
aud.src = 'https://wj.zp68.com/lxx/yunhua/2022/09/14/liul.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.background= 'linear-gradient(90deg, orange, red ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';
      prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
      for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) {
                        if(lrcKey == j) {
                              showLrc();
                        } else {
                              continue;
                              
                        }
                }
      }
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let showLrc = () => {
      let time= 6;
      if(lrcKey < lrcAr.length - 1) {
                time = lrcAr - lrcAr;
                lrc.style.animation = (lrcKey % 2 == 0 ? 'bgMerg1 ' : 'bgMerg2 ') + time + 's linear forwards';
      }
      lrc.innerText = lrcAr;
      lrcKey += 1;
      if(lrcKey >= lrcAr.length) lrcKey = 0;
}
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-15 20:09

昨天上来看见黑黑好几个新的播放器分享，我也是好几个作业没有完成的，这个我就学习添加加动图效果。一步步把画面美化起来，反正播放器我喜欢的{:4_170:}

小辣椒 发表于 2022-9-15 20:10

@马黑黑

黑黑我速度一个，作业来不及交，偷懒了{:4_173:}

梦油 发表于 2022-9-15 20:22

那闪烁的星光，那飞舞的雪花和可爱的小动物，构成了窗外一幅美丽的风景

马黑黑 发表于 2022-9-15 20:24

菇凉快止泪，酱紫流下去，要变成木乃伊的，不美{:4_170:}

马黑黑 发表于 2022-9-15 20:27

歌词同步貌似逐字同步，挺好挺好。歌也很耐听。

小辣椒 发表于 2022-9-15 20:32

马黑黑 发表于 2022-9-15 20:27
歌词同步貌似逐字同步，挺好挺好。歌也很耐听。

这个歌词同步比较前面的这个感觉美觉效果好

小辣椒 发表于 2022-9-15 20:33

马黑黑 发表于 2022-9-15 20:24
菇凉快止泪，酱紫流下去，要变成木乃伊的，不美

哈哈~~不会变木乃伊的{:4_189:}

小辣椒 发表于 2022-9-15 20:34

梦油 发表于 2022-9-15 20:22
那闪烁的星光，那飞舞的雪花和可爱的小动物，构成了窗外一幅美丽的风景

梦油很灵光的，我就加了这么几个效果进去，你一眼就看出了{:4_173:}

小辣椒 发表于 2022-9-15 20:35

马黑黑 发表于 2022-9-15 20:27
歌词同步貌似逐字同步，挺好挺好。歌也很耐听。

黑黑我感觉歌词用2种颜色不用这么多渐变会不会看上简洁一点，就一个颜色盖过一个颜色

梦油 发表于 2022-9-15 20:36

小辣椒 发表于 2022-9-15 20:34
梦油很灵光的，我就加了这么几个效果进去，你一眼就看出了

小辣椒朋友心灵手巧

小辣椒 发表于 2022-9-15 20:37

梦油 发表于 2022-9-15 20:36
小辣椒朋友心灵手巧

哇瑟~~~谢谢梦油夸奖，小辣椒其实真的不咋的，还在学习中

加林森 发表于 2022-9-15 20:44

真的制作漂亮，几个动画就变活了整个画面。{:4_199:}

梦缘 发表于 2022-9-15 20:46

好美的图，欣赏点赞！{:4_187:}

红影 发表于 2022-9-15 20:59

还真有流泪的动态呢，还有那么多的动态元素，亲爱的制作真漂亮{:4_199:}

马黑黑 发表于 2022-9-15 21:09

小辣椒 发表于 2022-9-15 20:35
黑黑我感觉歌词用2种颜色不用这么多渐变会不会看上简洁一点，就一个颜色盖过一个颜色

是的，爱怎么玩怎么玩就好

马黑黑 发表于 2022-9-15 21:09

小辣椒 发表于 2022-9-15 20:33
哈哈~~不会变木乃伊的

人体水含量70%上下，会会流完的

马黑黑 发表于 2022-9-15 21:10

小辣椒 发表于 2022-9-15 20:32
这个歌词同步比较前面的这个感觉美觉效果好

嗯{:4_181:}

红芍药 发表于 2022-9-15 22:07

辣椒做得好有创意，歌词也是同步呢。{:4_199:}{:4_199:}

梦油 发表于 2022-9-16 14:54

小辣椒 发表于 2022-9-15 20:37
哇瑟~~~谢谢梦油夸奖，小辣椒其实真的不咋的，还在学习中

你的制作确实很有新意，很漂亮。

查看完整版本: 谁在窗外流泪--歌手：小骆驼（学习黑黑教程分享）