亦是金 发表于 2023-3-24 22:10

《华尔兹》 - 新时代乐队（学习黑黑老师遥控播放器）

本帖最后由 亦是金 于 2023-3-25 12:07 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1846164">
<div style="width: 1200px;height: 700px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:30px;margin-LEFT: -310px;">
<style>
#papa {
        margin: auto;
        top: 0px;
        left: 0px;
        width: 1200px;
        height: 700px;
        background: gray url('https://s1.ax1x.com/2023/02/28/ppCbWn0.jpg') center/cover no-repeat;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        z-index: 1;
        --state: paused;
}
#papa::before {
        position: absolute;
        content: '';
        top: 490px;
        left: -20px;
        width: 230px;
        height: 230px;
        background: url('https://638183.freep.cn/638183/t23/1/heart_133236768103332344.png') 0 0 no-repeat;
        background-size: 2900%;
        animation: chgBg steps(28) 1.5s infinite both;
        animation-play-state: var(--state);
}
@keyframes chgBg {
        0% { background-position: 0%; }
        100% { background-position: 100%; }
}
#mplayer {
        width: 80px;
        height: 135px;
        left: 50px;
        bottom: 20px;
        background: black;
        border-radius: 8px;
        box-shadow: 6px 4px 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: 6px;
        border-radius: 50%;
        background: #333;
        pointer-events: auto;
        cursor: pointer;
        border: 2px solid snow;
        box-shadow: 0 0 20px blue;
        animation: flash .3s infinite alternate var(--state);
}
#mplayer::after {
        content:attr(data-tt);
        top: 6px; right: 6px; bottom: 42px; left: 6px;
        background: #333;
        color: lightblue;
      font-family:楷书;
      font-weight: bold;
        font-size: 14px;
        text-align: center;
        padding: 4px;
        white-space:pre;
}
#mplayer:active { transform: rotate(15deg); }
#vid { display: none; }
#canv {
        position: absolute;
        display: block;
        top: 0px;
      left: 0px;
        width: 1400px;
        height: 700px;
        border-radius: 0%;
        opacity: .45;
}
@keyframes flash {
        to { box-shadow: 0 0 30px white; }
}
</style>

<div id="papa">
        <canvas id="canv"></canvas>
        <div id="mplayer" data-tt="欢迎欣赏&#10;&#10;00:00&#10;00:00"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2022379472.mp3" loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/08/28/5d23187daafa5.mp4" loop muted></video>
<style type="text/css">
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
body { overflow-x: hidden; }
#baiBox {
      margin: auto;
      width: 800px;
      text-align: center;
      font-family:微软简中圆;
      font-size: 2.5rem;
      font-weight: bold;
      color: #f46ff6;
      transform-origin: top;
      animation: yao 1.0s linear infinite alternate;
}
@keyframes yao {
      from{transform: perspective(800px) rotatex(30deg); }
      to { transform: perspective(800px) rotatex(-30deg); }
}
.tit { position: relative;width: 300px;height: 30px;top:-670px;LEFT: -390px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }
</style>

<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:32px;">《 华 尔 兹 》</span>
<span style="color:#3d46f7;"><span style="font-size:22px;">- 新时代乐队</span></div>



<div style="position: relative;width: 500px;height: 50px;top:-85px;LEFT: 972px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:26px;">亦是金在线音乐</span></span></span></p></div>

</style>

<script>

let ctx = canv.getContext('2d');
let ww = canv.width = 1000, 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>
</td></tr></table>

红影 发表于 2023-3-24 22:16

这个是把那颗心形连续动图放在遥控器后面了么，构思很巧妙{:4_199:}

亦是金 发表于 2023-3-24 22:20

红影 发表于 2023-3-24 22:16
这个是把那颗心形连续动图放在遥控器后面了么，构思很巧妙

是的,谢谢欣赏！晚上好！{:4_187:}

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

欣赏了

亦是金 发表于 2023-3-24 23:05

马黑黑 发表于 2023-3-24 22:56
欣赏了

谢谢黑黑老师欣赏！问好！{:4_191:}

马黑黑 发表于 2023-3-25 07:35

亦是金 发表于 2023-3-24 23:05
谢谢黑黑老师欣赏！问好！

早

亦是金 发表于 2023-3-25 08:47

马黑黑 发表于 2023-3-25 07:35
早

黑黑老师早上好！{:4_191:}

马黑黑 发表于 2023-3-25 09:02

亦是金 发表于 2023-3-25 08:47
黑黑老师早上好！

喝早酒，人长寿

红影 发表于 2023-3-26 13:54

亦是金 发表于 2023-3-24 22:20
是的,谢谢欣赏！晚上好！

这个制作特别漂亮{:4_199:}
页: [1]
查看完整版本: 《华尔兹》 - 新时代乐队（学习黑黑老师遥控播放器）