红影 发表于 2023-3-24 20:13

烟雨江南TO清儿幽幽

<style>
#papa {
      margin: 100px 0 0 calc(50% - 593px);
      width: 1024px;
      height: 640px;
      background: gray url('https://pic.imgdb.cn/item/641d6213a682492fcc999a8f.jpg') center/cover no-repeat;
      box-shadow: 3px 3px 20px #000;
      position: relative;
      z-index: 1;
      --state: paused;
}
#mplayer {
      width: 80px;
      height: 160px;
      left: 10px;
      bottom: 10px;
      background: Teal;
      border-radius: 8px;
      box-shadow: 0px 0px 12px snow;
      transition: .6s;
      position: absolute;
      pointer-events: none;
}
#mplayer::before, #mplayer::after {
      position: absolute;
      content: '';
}
#mplayer::before {
      width: 30px;
      height: 30px;
      left: calc(50% - 15px);
      bottom: 15px;
      border-radius: 50%;
      background: LightSeaGreen;
      pointer-events: auto;
      cursor: pointer;
      border: 2px solid snow;
      box-shadow: 0 0 10px blue;
      animation: flash .6s infinite alternate var(--state);
}
#mplayer::after {
      content:attr(data-tt);
      top: 6px; right: 6px; bottom: 60px; left: 6px;
      background: LightSeaGreen;
      color: lightblue;
      font-size: 14px;
      text-align: center;
      padding: 4px;
      white-space:pre;
}
#mplayer:active { transform: rotate(5deg); }
#vid { display: none; }
#canv {
      position: absolute;
      display: block;      
      opacity: .2;
}

@keyframes flash {
      to { box-shadow: 0 0 30px white; }
}
.txt3d {
      position: absolute; left: 40px;top: 10px;
      width: 380px;
      height: 60px;
      line-height: 60px;
      color: white;
      font-family: '微软雅黑', '黑体', sans-serif;
      font-size: 2.2rem;
      color: LightSeaGreen;
      text-align: center;
      letter-spacing: 4px;   
      text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8);
</style>

<div id="papa">
      <canvas id="canv"></canvas>
      <div id="mplayer" data-tt="HCPlayer

00:00
00:00"></div>
<p class ="txt3d">烟雨江南TO清儿幽幽</p>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1333128008" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d04564c32f7_10s_big.mp4" autoplay loop muted></video>

<script>

let ctx = canv.getContext('2d');
let ww = canv.width = 1024, hh = canv.height = 640;
let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh);if(!vid.paused) {requestAnimationFrame(loop);return;}}
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;};
let mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'),vid.pause()) : (papa.style.setProperty('--state', 'running'),vid.play());
vid.playbackRate = 0.5;
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('timeupdate', () => mplayer.dataset.tt = '烟雨江南\n\n' + toMin(aud.duration) + '\n' + toMin(aud.currentTime));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

</script>

红影 发表于 2023-3-24 20:14

用新学的播放器，送清儿一个小礼。祝福快乐{:4_187:}
感谢马黑黑的代码。

起个网名好难 发表于 2023-3-24 20:31

欣赏美帖

梦油 发表于 2023-3-24 20:37

来欣赏优美的乐曲。

千羽 发表于 2023-3-24 21:08

很美的图色，调色美美达{:4_187:}

千羽 发表于 2023-3-24 21:09

精巧的播放器，，点击会摇动，问好影儿{:4_187:}

小辣椒 发表于 2023-3-24 21:29

亲爱的~~你速度的，视频效果棒棒的{:4_178:}

小辣椒 发表于 2023-3-24 21:30

清儿好想你的。。。。。抱一个{:4_179:}

樵歌 发表于 2023-3-24 22:04

谢谢师妹美帖{:4_187:}

樵歌 发表于 2023-3-24 22:05

先替她保管好，顺便蹭一下{:4_173:}

樵歌 发表于 2023-3-24 22:07

好美的烟雨江南意境！

千羽 发表于 2023-3-24 22:15

好久没见清儿了，快来开心收礼哈{:4_187:}

马黑黑 发表于 2023-3-24 22:37

樵歌 发表于 2023-3-24 22:05
先替她保管好，顺便蹭一下

{:4_196:}

马黑黑 发表于 2023-3-24 22:38

蹭听

马黑黑 发表于 2023-3-24 22:38

蹭看

亦是金 发表于 2023-3-25 00:22

图色清新，歌曲好听，制作精彩！学习了！{:4_187:}

庶民 发表于 2023-3-25 06:16

代码美图真的好，羡慕啊。

樵歌 发表于 2023-3-25 11:51

马黑黑 发表于 2023-3-24 22:37


想错了{:4_172:}

马黑黑 发表于 2023-3-25 12:13

樵歌 发表于 2023-3-25 11:51
想错了

错了改

清儿幽幽 发表于 2023-3-26 11:39

影儿 浸染烟雨，迷蒙的城市
江南醉了清风   醉了三月


谢谢精美的制作   不在论坛
我一直在路上   想你想念友友们
页: [1] 2
查看完整版本: 烟雨江南TO清儿幽幽