梦江南 发表于 2024-9-15 11:33

情浓中秋，祝大家中秋节快乐！

<style>
#mydiv {
      --width: 1200px;
      margin: 130px 0 30px calc(50% - (var(--width) / 2 + 81px));
      width: var(--width);
      height: 780px;
      background: url('https://www.yiyuen.com/e/file/view/664253 ') no-repeat center/cover; z-index: 1; overflow: hidden; radial-gradient(circle, transparent, silver, #ccdeec, circle);
      box-shadow: 3px 3px 6px #333;
      pointer-events: none;
      overflow: hidden;
      position: relative;
}
#mydiv::before, #mydiv::after {
      position: absolute;
      content: '';
}
#mydiv::before {
      inset: 0;
      background: rgba(0, 100, 100, .15);
}
#mydiv::after {
      width: 200px;
      height: 200px;
      top: 40px;
      left: calc(50% - 50px);
      background: url('https://pic.imgdb.cn/item/66e0f585d9c307b7e93cab28.png') no-repeat center/cover;
      filter: drop-shadow(0 0 26px lightblue);
      pointer-events: auto;
      cursor: pointer;
      animation: rot 8s linear infinite var(--state);
}
#vid {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: calc(100% + 70px);
      object-fit: cover;
      mix-blend-mode: color-dodge;
      opacity: .75;
}
@keyframes rot {
      to { transform: rotate(360deg); }
}
</style>

<div id="mydiv" title="播放/暂停">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1980950250" autoplay loop></audio>
      <video id="vid" src="https://img.tukuppt.com/video_show/7165162/00/20/20/5f2102739a334.mp4" muted loop autoplay disablePictureInPicture></video>
</div>

<script>
      aud.oncanplay = aud.onplaying = aud.onpause = () => {
                aud.paused ? vid.pause() : vid.play();
                mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
                mydiv.title = ['暂停','播放'][+aud.paused];
      }
      mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

梦江南 发表于 2024-9-15 11:37



https://pic.imgdb.cn/item/66e530ded9c307b7e9b286d7.gif

起个网名好难 发表于 2024-9-15 12:59

https://5b0988e595225.cdn.sohucs.com/images/20190914/3e5cec09f77c4bbabb9324fd657957ab.gif

愤怒的葡萄 发表于 2024-9-15 13:04

挺可爱的小兔子。

红影 发表于 2024-9-15 14:05

好美妙的祝福帖子。感谢江南的美好祝福，也祝你中秋节快乐{:4_199:}

梦油 发表于 2024-9-15 14:36

圆圆的月、浓浓的情。祝梦江南和朋友们中秋节快乐！

岩新新 发表于 2024-9-15 15:04

分享精彩制作！

梦江南 发表于 2024-9-15 15:13

起个网名好难 发表于 2024-9-15 12:59


问好老师，谢谢分享，中秋快乐，阖家团圆！

梦江南 发表于 2024-9-15 15:14

愤怒的葡萄 发表于 2024-9-15 13:04
挺可爱的小兔子。

问好，谢谢支持，中秋节快乐阖家团圆！

梦江南 发表于 2024-9-15 15:15

红影 发表于 2024-9-15 14:05
好美妙的祝福帖子。感谢江南的美好祝福，也祝你中秋节快乐

问好影子，谢谢支持鼓励，祝中秋节快乐阖家团圆！{:4_204:}

梦江南 发表于 2024-9-15 15:16

梦油 发表于 2024-9-15 14:36
圆圆的月、浓浓的情。祝梦江南和朋友们中秋节快乐！

问好老师，谢谢支持，祝中秋节快乐阖家团圆！

梦江南 发表于 2024-9-15 15:17

岩新新 发表于 2024-9-15 15:04
分享精彩制作！

问好老师，谢谢支持，祝中秋快乐阖家团圆！

醉美水芙蓉 发表于 2024-9-15 16:01

梦油 发表于 2024-9-15 16:36

梦江南 发表于 2024-9-15 15:16
问好老师，谢谢支持，祝中秋节快乐阖家团圆！

不客气。

红影 发表于 2024-9-15 18:17

梦江南 发表于 2024-9-15 15:15
问好影子，谢谢支持鼓励，祝中秋节快乐阖家团圆！

美好的祝福，谢谢江南，也祝您阖家团圆，幸福美满{:4_187:}

梦江南 发表于 2024-9-16 10:03

醉美水芙蓉 发表于 2024-9-15 16:01
欣赏老师带来的精彩！

问好老师，中秋快乐！

梦江南 发表于 2024-9-16 10:03

梦油 发表于 2024-9-15 16:36
不客气。

中秋快乐！

梦江南 发表于 2024-9-16 10:05

红影 发表于 2024-9-15 18:17
美好的祝福，谢谢江南，也祝您阖家团圆，幸福美满

这次台风到上海了，这二天千万不要出门。中秋快乐！{:4_204:}

红影 发表于 2024-9-16 11:13

梦江南 发表于 2024-9-16 10:05
这次台风到上海了，这二天千万不要出门。中秋快乐！

是啊，现在外面就风大雨大的，挺可怕。
谢谢江南关心{:4_187:}

梦江南 发表于 2024-9-16 14:49

红影 发表于 2024-9-16 11:13
是啊，现在外面就风大雨大的，挺可怕。
谢谢江南关心

从抖音上看上海的这次台风是挺可怕的。要小心哦！
页: [1] 2
查看完整版本: 情浓中秋，祝大家中秋节快乐！