绿叶清舟 发表于 2024-7-25 20:10

海韵


<style>
#mydiv {
      --width: 1280px;
      margin: 130px 0 30px calc(50% - (var(--width) / 2 + 81px));
      width: var(--width);
      height: 780px;
      background: url('https://p.upyun.com/demo/tmp/Zg7VyYhD.webp') 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: 100px;
      height: 100px;
      top: 40px;
      left: calc(50% - 50px);
      background: url('https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.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=1296092930" autoplay loop></audio>
      <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/41/56/6332b7166860f.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-7-25 21:25

记得黑黑的帖子里用过这样的视频呢，被清舟用出了新意，这样的海韵好美{:4_199:}

红影 发表于 2024-7-25 21:29

那“海韵”两字被背景弄得好像动态一样，女子的身影也能遮挡小船，这效果真棒{:4_199:}

梦油 发表于 2024-7-25 22:06

这个画面很有特色啊。

马黑黑 发表于 2024-7-25 22:46

{:4_199:}

愤怒的葡萄 发表于 2024-7-25 23:30

{:4_199:}

梦江南 发表于 2024-7-26 07:41

老师的作品高雅舒服！赞，赞！歌曲也配得好！{:4_187:}

海笑 发表于 2024-7-26 07:44

欣赏老师佳作！

竹溪 发表于 2024-7-26 16:11

光影很奇妙。

竹溪 发表于 2024-7-26 16:11

欣赏老师佳作。

小辣椒 发表于 2024-7-26 19:56

清舟佳作多多，可惜小辣椒欣赏来迟了{:4_171:}

小辣椒 发表于 2024-7-26 19:59

清舟就是会选题材，会选歌曲，这首邓丽君的经典老歌--海韵，很喜欢的，曾经我做过大图的，那个时候也是自己现在都佩服，大图中间加了小动图，做的海浪水波，现在我都不知道怎么做了{:4_189:}

小辣椒 发表于 2024-7-26 19:59

听这首海韵让我回忆满满。。。。

小辣椒 发表于 2024-7-26 20:00

欣赏清舟的精彩制作，小辣椒要向你学习的{:4_171:}
页: [1]
查看完整版本: 海韵