红影 发表于 2022-9-2 22:32

我要抓到你（学习黑黑三个珠珠效果）


<style>
#papa {
      left: -302px;
      top:120px;
      width: 1200px;
      height: 675px;
      position: relative;
      background: gray url('https://pic.imgdb.cn/item/630f5e7116f2c2beb1d4ff0a.jpg') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      overflow: hidden;
}
.chan {
      --delay: 0s;
      position: absolute;
      width: 90px;
      height: 49px;
      animation: move 10s var(--delay) infinite;
}
.tanglang { --delay: 1s; width: 120px; height: 87px; }
.niao { --delay: 2.5s; width: 103px; height: 80px;}

@keyframes move{
      0%, 100% { transform: rotate(0deg);left: 40px; top: 310px; scale(1); }
      25% { transform: rotate(0deg);left: 320px; top: 80px; scale(0.6); }
      50% { transform: rotateY(180deg);left: 980px; top: 260px; scale(1); }
      75% { transform: rotateY(180deg);left: 570px; top: 550px; scale(1); }
}
#btnwrap { position: absolute; right: 580px; top: 290px; width: 100px; height: 100px; display: grid; place-items: center; }
#btnwrap span { position: absolute; transition: all 1.2s; }
#h5player { width: 100px; height: 100px; border-radius: 50%; background: tan conic-gradient(from 0deg, red, green, red 1%, snow 0); mask: radial-gradient(transparent 60%, red 61%, red 0); -webkit-mask: radial-gradient(transparent 60%, red 61%, red 0); }
#btnplay { left: 15px; width: 20px; height: 20px; background: #EEE1AA; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
#btnplay:hover { background: tomato; }
#btnpause { left: 20px; width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #EEE1AA; display: none; cursor: pointer; }
#btnpause:hover{ border-color: transparent tomato; }
#tmsg { left: 40px; font: normal 16px sans-serif; color: #EEE1AA; }
#lrctext { position: absolute; right:80px; top: 50px; font: bold 1.2em sans-serif; color:#F4EBC6; text-shadow: 1px 1px 1px #000; transition: 1.2s; }
#lrctext:hover, #tmsg:hover { color: orange; }
</style>

<div id="papa">
      <div id="btnwrap">
                <span id="h5player"></span><span id="btnplay"></span><span id="btnpause"></span>
                <span id="tmsg">00:00<br>00:00</span>
      </div>
      <div id="lrctext">lrc歌词</div>
      <div class="chan"><img alt="" src="https://pic.imgdb.cn/item/6312133516f2c2beb12c2cfd.png"/></div>
      <div class="chan tanglang"><img alt="" src="https://pic.imgdb.cn/item/630f5ebb16f2c2beb1d541d7.png"/></div>
      <div class="chan niao"><img alt="" src="https://pic.imgdb.cn/item/630f5ee516f2c2beb1d5673f.png"/></div>
</div><br><br><br><br><br><br>

<script>
let aud = new Audio();
let lrcAr = [ ['0.00','我要找到你 不管南北东西'],['5.00','直觉会给我指引'],['10.00','我要找到你 不管南北东西'],['240.00','谢谢支持'] ]
aud.src = 'https://music.163.com/song/media/outer/url?id=1411773482.mp3';
aud.autoplay = true;
aud.loop = true;

btnplay.onclick = () => aud.play();
btnpause.onclick = () => aud.pause();
h5player.onmousemove = (e) => h5player.style.cursor =isHover(e.offsetX, e.offsetY) ? 'pointer' : 'default';
h5player.onclick = (e) => {
      if (isHover(e.offsetX, e.offsetY)) {
                let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
                deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
                aud.currentTime = aud.duration * deg / 360;
      }
}
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
      tmsg.innerHTML = toMin(aud.currentTime) + '<br>' + toMin(aud.duration);
      h5player.style.background = 'conic-gradient(from 0deg, red, green, red ' + aud.currentTime / aud.duration * 100 + '%, #EEE1AA 0)';
      for (j = 0; j < lrcAr.length;j ++) {
                if (aud.currentTime >= lrcAr) lrctext.innerHTML = lrcAr;
      }
});
let isHover = (x,y) => Math.pow(x - 50, 2) + Math.pow(y - 50, 2) >= Math.pow(40, 2);
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>

红影 发表于 2022-9-2 22:34

那天在三个珠珠的帖子里，黑黑问这个能做什么，我答能做螳螂捕蝉黄雀在后，做出来后发现因为三个图图尺寸不一样，移动起来的效果并不好，就没发{:4_173:}

红影 发表于 2022-9-2 22:35

好吧，让它们彼此都抓不到，好好地活着也不错{:4_173:}

小辣椒 发表于 2022-9-2 23:04

亲爱的，好玩{:4_178:}

小辣椒 发表于 2022-9-2 23:06

功夫不负就有心人，亲爱的每天认真学习黑黑的教程，付出就总有回报，现在的制作就是学习的成绩，特棒!{:4_178:}

青青子衿 发表于 2022-9-2 23:52

红影的帖子，总是那么出人意料。。。那个蚱蜢的大刀，始终没挥出去。。。{:4_173:}{:4_173:}影子，友友这帖子，太讨喜了。。

加林森 发表于 2022-9-3 12:29

这个没有看见呢？差点漏掉了。{:4_199:}

千羽 发表于 2022-9-3 15:24

很有意思{:4_205:}

千羽 发表于 2022-9-3 15:26

开开心心来欣赏影儿的高端作业{:4_187:}

红影 发表于 2022-9-3 16:17

小辣椒 发表于 2022-9-2 23:04
亲爱的，好玩

亲爱的那么晚还在线啊，当心身体哦{:4_179:}

红影 发表于 2022-9-3 16:18

小辣椒 发表于 2022-9-2 23:06
功夫不负就有心人，亲爱的每天认真学习黑黑的教程，付出就总有回报，现在的制作就是学习的成绩，特棒!{:4_1 ...

是啊，黑黑讲了那么多知识，能学到是我们的福气呢{:4_204:}

红影 发表于 2022-9-3 16:19

青青子衿 发表于 2022-9-2 23:52
红影的帖子，总是那么出人意料。。。那个蚱蜢的大刀，始终没挥出去。。。影子，友友这帖 ...

哪天随口说起，就试着去做了做，做完也觉得挺好玩。主要是黑黑的代码好玩{:4_173:}

红影 发表于 2022-9-3 16:19

加林森 发表于 2022-9-3 12:29
这个没有看见呢？差点漏掉了。

昨天发得比较晚{:4_173:}

红影 发表于 2022-9-3 16:20

千羽 发表于 2022-9-3 15:24
很有意思

是啊，螳螂捕蝉黄雀在后，只要把它们按顺序排一下，就可以套用黑黑的代码了{:4_173:}

红影 发表于 2022-9-3 16:20

千羽 发表于 2022-9-3 15:26
开开心心来欣赏影儿的高端作业

不高端呢，只是好玩一下{:4_173:}

加林森 发表于 2022-9-3 16:23

红影 发表于 2022-9-3 16:19
昨天发得比较晚

哦。我昨晚在看老黑的教程呢。

红影 发表于 2022-9-3 21:43

加林森 发表于 2022-9-3 16:23
哦。我昨晚在看老黑的教程呢。

嗯嗯，没事。
页: [1]
查看完整版本: 我要抓到你（学习黑黑三个珠珠效果）