梦江南 发表于 2024-6-27 14:14

套用学习马老师代码【加沃特舞曲】


<style>
#tz {
      --width: 1024px;
      margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px));
      width: var(--width);
      height: 640px;
      background: url('https://pic.imgdb.cn/item/667a5ffed9c307b7e927f0fc.pn') no-repeat center/cover;
      box-shadow: 3px 3px 8px rgba(0, 0, 0, .6);
      overflow: hidden;
      position: relative;
}
#player {
      position: absolute;
      display: grid;
      place-items: center;
      left: 45%;
      top: 22%;
      width: var(--ww);
      height: var(--ww);
      background: url('https://638183.freep.cn/638183/t23/btn/f5.png') no-repeat 50%/60%;
      border-radius: 50%;
      cursor: pointer;
      transition: .7s;
      animation: rot 6s linear infinite var(--state);
      --ww: 120px;
      --size: 20px;
}
#player:hover { filter: hue-rotate(30deg); }
c-c {
      position: absolute;
      width: var(--size);
      height: var(--size);
      border-radius: 50%;
      background: linear-gradient(green, cyan);
      box-shadow: 0 0 6px rgba(0, 0, 0, .1);
      animation: flyout 2s forwards;
}
#vid {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: calc(100% + 60px);
      object-fit: cover;
      mix-blend-mode: overlay;
      pointer-events: none;
}
#tz:fullscreen #vid { height: calc(100% + 100px); }
@keyframes flyout {
      to { transform: rotate(var(--deg)) translateY(calc(var(--ww) / 2)); }
}
@keyframes flyin {
      from { transform: rotate(var(--deg)) translateY(calc(var(--ww) / 2)); }
      to { transform: rotate(calc(var(--deg) * 2)) translateY(0); }
}
@keyframes rot {
      to { transform: rotate(360deg); }
}
</style>

<div id="tz">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2033187666" autoplay loop></audio>
      <video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/29/96/5fa09f4e88257.mp4" muted autoplay loop></video>
      <div id="player" title="暂停"></div>
</div>

<script>
var ccs = [];
new Array(total = 12).fill(0).map((c,k) => {
      c = document.createElement('c-c');
      c.style.cssText += `--deg: ${360 / total * k}deg`;
      player.appendChild(c);
      ccs.push(c);
});

var mState = () => {
      player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      player.title = ['暂停','播放'][+aud.paused];
      ccs.forEach(cc => cc.style.animationName = aud.paused ? 'flyin' : 'flyout');
      aud.paused ? vid.pause() : vid.play();
};

aud.oncanplay = aud.onplaying = aud.onpause = () => mState();

player.onclick = () => aud.paused ? aud.play() : aud.pause();

var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
      papa: '#tz',
      css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: rgba(0,128,0,.5);',
});
</script>

梦江南 发表于 2024-6-27 14:19

感谢马黑黑老师的代码。https://pic.imgdb.cn/item/667a6fa3d9c307b7e9452ec5.gif

红影 发表于 2024-6-27 16:29

漂亮的制作，欣赏梦江南好帖{:4_187:}

起个网名好难 发表于 2024-6-27 17:23

本帖最后由 起个网名好难 于 2024-6-27 17:24 编辑

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

梦江南 发表于 2024-6-27 17:27

红影 发表于 2024-6-27 16:29
漂亮的制作，欣赏梦江南好帖

谢谢影子支持！晚上好！{:4_204:}

梦江南 发表于 2024-6-27 17:28

起个网名好难 发表于 2024-6-27 17:23


难难老师，你的表情只是代码啦？{:4_173:}

起个网名好难 发表于 2024-6-27 17:52

梦江南 发表于 2024-6-27 17:28
难难老师，你的表情只是代码啦？

图片，论坛把它转成代码的吧

梦江南 发表于 2024-6-27 18:25

起个网名好难 发表于 2024-6-27 17:52
图片，论坛把它转成代码的吧

我咋知道啦。{:4_173:}

起个网名好难 发表于 2024-6-27 20:08

梦江南 发表于 2024-6-27 18:25
我咋知道啦。

我懒得很一般就用个图片回复帖子{:5_102:}

红影 发表于 2024-6-27 22:53

梦江南 发表于 2024-6-27 17:27
谢谢影子支持！晚上好！

不客气啊，问好梦江南{:4_187:}

梦江南 发表于 2024-6-28 13:05

起个网名好难 发表于 2024-6-27 20:08
我懒得很一般就用个图片回复帖子

哈哈，不要懒得出虫就好！{:4_173:}

梦江南 发表于 2024-6-28 13:07

红影 发表于 2024-6-27 22:53
不客气啊，问好梦江南

问好影子，下午好！{:4_171:}

起个网名好难 发表于 2024-6-28 17:49

梦江南 发表于 2024-6-28 13:05
哈哈，不要懒得出虫就好！

{:5_102:}

梦江南 发表于 2024-6-29 16:20

起个网名好难 发表于 2024-6-28 17:49


哈哈，过份谦虚就是骄傲！{:4_172:}

红影 发表于 2024-6-29 21:58

梦江南 发表于 2024-6-28 13:07
问好影子，下午好！

到今天才回复，昨晚上不来，不好意思啊{:4_173:}

梦江南 发表于 2024-6-30 08:23

红影 发表于 2024-6-29 21:58
到今天才回复，昨晚上不来，不好意思啊

好像昨天上午论坛打不开。不知啥情况？

红影 发表于 2024-6-30 15:49

梦江南 发表于 2024-6-30 08:23
好像昨天上午论坛打不开。不知啥情况？

论坛有专门的说明，你没去看么？是空间商升级，导致我们这里有波动，被技术管理弄好了。
页: [1]
查看完整版本: 套用学习马老师代码【加沃特舞曲】