论坛 › 欢乐水吧 › 桃花渡（学习黑黑海浪效果）

红影 发表于 2023-3-16 22:18

桃花渡（学习黑黑海浪效果）

<style>
#papa {
        margin: 80px 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        display: grid;
        place-items: center;
        z-index: 1;
}
#canv {
        position: absolute;
        display: block;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        cursor: pointer;
        z-index: 2;
}
#vid { display: none; }

#mypic {
        width: 300px;
        height: 400px;
        position: absolute;
        top: 120px;
        right: 300px;
        cursor: pointer;
        z-index: 3;
        animation: rot 2s infinite alternate var(--state);
        --state: paused;
}
@keyframes rot { to { transform:skew(8deg,1deg); } }
.wenzi { position: absolute; right:56px; top: 20px; z-index: 4; color: pink; font: bold 26px/30px 'FangSong',serif;opacity: .45; }
</style>

<div id="papa">
        <canvas id="canv"></canvas>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1336280509" autoplay loop></audio>
        <video id="vid" src="https://imgs-qn.51miz.com/preview/video/00/00/14/39/V-143937-44A4363C.mp4" autoplay loop muted></video>
        <img id="mypic" src="https://s1.ax1x.com/2023/03/17/ppGSMAe.png" alt="" />
      <div class="wenzi">【古筝】桃花渡</div>
</div>
<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {
        ctx.drawImage(vid, 0, 0, ww, hh);
        if(!vid.paused) {
                requestAnimationFrame(loop);
                return;
        }
}
let mState = () => aud.paused ? (mypic.style.setProperty('--state', 'paused'), vid.pause()) : (mypic.style.setProperty('--state', 'running'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mypic.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>

红影 发表于 2023-3-16 22:19

这个做起来方便，找个视频一个图图就做起来{:4_173:}

大猫咪 发表于 2023-3-16 22:23

哇红影这个制作真漂亮！ {:5_106:}立体感很强，赞！

{:4_204:}{:4_199:}

庶民 发表于 2023-3-17 05:08

很漂亮的，仙女飞天。

梦油 发表于 2023-3-17 09:05

哇！太美了，美不胜收啊。

可惜这大清早儿俺没分了
       {:4_201:}

红影 发表于 2023-3-17 10:27

大猫咪 发表于 2023-3-16 22:23
哇红影这个制作真漂亮！   立体感很强，赞！

找到个有感觉的视频，就做了个玩{:4_173:}

红影 发表于 2023-3-17 10:28

庶民 发表于 2023-3-17 05:08
很漂亮的，仙女飞天。

谢谢庶民鼓励，这样的场景比较纯净优美，跟仙境似的{:4_173:}

红影 发表于 2023-3-17 10:29

梦油 发表于 2023-3-17 09:05
哇！太美了，美不胜收啊。

可惜这大清早儿俺没分了

没事，分不分的不重要，梦油来看就是对俺的鼓励{:4_187:}

樵歌 发表于 2023-3-17 10:35

就欺负师兄，只看到桃花在动和底图的灿烂，中间一个黑板{:4_198:}

樵歌 发表于 2023-3-17 10:35

庶民 发表于 2023-3-17 05:08
很漂亮的，仙女飞天。

你的签名也变黑板啦{:4_172:}

红影 发表于 2023-3-17 10:49

樵歌 发表于 2023-3-17 10:35
就欺负师兄，只看到桃花在动和底图的灿烂，中间一个黑板

是图床出问题了，应该过一会就好了。我换了个地址，师兄再看看。

梦油 发表于 2023-3-17 10:58

红影 发表于 2023-3-17 10:29
没事，分不分的不重要，梦油来看就是对俺的鼓励

你的文字很美，不加分有点遗憾。

雨中悄然 发表于 2023-3-17 18:02

有仙女在飞。仙气十足，影宝贴子都很温馨{:4_187:}

红影 发表于 2023-3-17 20:33

梦油 发表于 2023-3-17 10:58
你的文字很美，不加分有点遗憾。

没事没事，别放心上{:4_187:}

红影 发表于 2023-3-17 20:34

雨中悄然 发表于 2023-3-17 18:02
有仙女在飞。仙气十足，影宝贴子都很温馨

这个做起来特别简单，一个视频一个图片就行了{:4_173:}

樵歌 发表于 2023-3-17 21:20

红影 发表于 2023-3-17 10:49
是图床出问题了，应该过一会就好了。我换了个地址，师兄再看看。

看到了，师妹在跳飞天舞{:4_173:}

樵歌 发表于 2023-3-17 21:24

红影 发表于 2023-3-16 22:19
这个做起来方便，找个视频一个图图就做起来

这个更复杂，我凑了答谢词，找了曲，找了图，按你送＂祝快乐生日快乐＂那帖的代码去替换，结果啥也不是{:4_198:}明天再试了。

红影 发表于 2023-3-17 21:27

樵歌 发表于 2023-3-17 21:20
看到了，师妹在跳飞天舞

哈哈，我还没学会飞啊，那个不是师妹，等师妹学会飞了再把自己飞的图图替换上去{:4_170:}

红影 发表于 2023-3-17 21:27

樵歌 发表于 2023-3-17 21:24
这个更复杂，我凑了答谢词，找了曲，找了图，按你送＂祝快乐生日快乐＂那帖的代码去替换，结果啥也不是{: ...

我不知道是用的哪个帖子，照道理只要替换图片和音乐，别的代码不动，就不会出问题啊。

庶民 发表于 2023-3-18 05:09

红影 发表于 2023-3-17 10:28
谢谢庶民鼓励，这样的场景比较纯净优美，跟仙境似的

这里代码高手真多。

查看完整版本: 桃花渡（学习黑黑海浪效果）