朵拉 发表于 2024-6-27 23:21

半 生（马黑黑原创）

本帖最后由 朵拉 于 2024-6-28 10:25 编辑 <br /><br /><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/667d8415d9c307b7e91fe676.jpg') 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: 75%;
      top: 52%;
      width: var(--ww);
      height: var(--ww);
      background: url('https://638183.freep.cn/638183/t23/btn/f3.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: color-dodge;
      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=2029214609" autoplay loop></audio>
      <video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/32/5b3f53c677460.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 23:54

等有时间把这图 打磨成音画~~

朵拉 发表于 2024-6-27 23:55

@马黑黑
老师好，学生交作业，请指正哈{:4_190:}

樵歌 发表于 2024-6-28 07:25

这和尚动凡心了。{:4_189:}

梦油 发表于 2024-6-28 09:04

这播放器做得很巧妙啊。

小辣椒 发表于 2024-6-28 10:12

朵拉换了个小播，这紫花播放器也是漂亮的

朵拉 发表于 2024-6-28 10:28

樵歌 发表于 2024-6-28 07:25
这和尚动凡心了。

还得是樵歌 有慧根哈~~{:4_173:}

朵拉 发表于 2024-6-28 10:29

梦油 发表于 2024-6-28 09:04
这播放器做得很巧妙啊。

谢谢梦油老师临帖欣赏{:4_190:}

朵拉 发表于 2024-6-28 10:34

小辣椒 发表于 2024-6-28 10:12
朵拉换了个小播，这紫花播放器也是漂亮的

是吧，原来的红艳艳不适合佛门清静之地{:4_173:}

马黑黑 发表于 2024-6-28 12:34

图片出来慢

梦油 发表于 2024-6-28 14:41

朵拉 发表于 2024-6-28 10:29
谢谢梦油老师临帖欣赏

别客气，朵拉朋友。

红影 发表于 2024-6-28 15:14

漂亮，欣赏朵宝好帖{:4_204:}

樵歌 发表于 2024-6-29 16:37

朵拉 发表于 2024-6-28 10:28
还得是樵歌 有慧根哈~~

不，是作者有慧根有灵性，才能创作出带禅韵的音画来。{:4_187:}
页: [1]
查看完整版本: 半 生（马黑黑原创）