论坛 › 欢乐水吧 › 纯音欣赏 倾听 TO：朵拉 （学习套用黑黑“遇见”效果）

小辣椒 发表于 2024-4-28 12:18

纯音欣赏 倾听 TO：朵拉 （学习套用黑黑“遇见”效果）

<style>
        #mydiv { margin: 150px 0 0 calc(50% - 781px); width: 1400px; height: 775px; background: url('https://xlaj.cn/assets/file/zp/20240428120212.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
        #mydiv::before, #mydiv::after { position: absolute; content: ''; transform-origin: 50% 50%; animation: swear .8s linear infinite alternate var(--state); }
        #mydiv::before { left: 65px; top: 50px; width: 180px; height: 90px; background: url('https://xlaj.cn/assets/file/zp/20240428120212.jpg') no-repeat -65px -50px; }
        #mydiv::after {left: 400px; top: 80px; width: 80px; height: 60px; background: url('https://xlaj.cn/assets/file/zp/20240428120212.jpg') no-repeat -320px -230px; }
        #player { position: absolute; top: 520px; width: 110px; filter: drop-shadow(0 0 6px #fff) opacity(.75); cursor: pointer; animation: rot 6s linear infinite var(--state); }
        .vid { position: absolute; object-fit: cover; mix-blend-mode: screen; }
        .vid:nth-of-type(1) { top:150px;left: 110px;width: 30%; height: 30%; }
        .vid:nth-of-type(2) { left: 36%; top: 28%;width: 8%; height: 10%; }
        #mydiv canvas { transform: skew(-15deg); }
        @keyframes rot { to { transform: rotate(360deg); } }
        @keyframes swear { to { transform: skew(15deg); } }
</style>

<div id="mydiv">
        <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/27/32/93/72f9840b455f57a46611a88a6e386810/audio.mp3" autoplay loop></audio>
        <video class="vid" src="https://zgsy-1254134120.cos.ap-guangzhou.myqcloud.com/nswx.mp4" muted autoplay loop></video>
        <video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/08/42/5d2228836b4e9.mp4" loop muted></video>
        <img id="player" src=" https://xlaj.cn/assets/file/zp/20240428120104.gif" alt="" />
</div>

<script>
        var sc = document.createElement('script');
        sc.charset = 'utf-8';
        sc.src = 'https://638183.freep.cn/638183/web/js/lzwz.js';
        document.body.appendChild(sc);
        var wz = {papa: '#mydiv', text: '倾听', left: '120px', top: '275px', color: 'OliveDrab'};
        var vids = document.querySelectorAll('.vid');
        var mState = () => vids.forEach(vid => aud.paused ?
                (vid.pause(), mydiv.style.setProperty('--state', 'paused')) :
                (vid.play(),mydiv.style.setProperty('--state', 'running')));
        aud.onplaying = aud.onpause = () => mState();
        player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

小辣椒 发表于 2024-4-28 12:20

@朵拉
小辣椒学习套用一个黑黑的教程分享，当礼物送了，一个旧图图加了自己喜欢的纯音，希望你不要嫌弃

一起开心学习{:4_171:}

小辣椒 发表于 2024-4-28 12:21

@马黑黑

黑黑小辣椒拉的作业太多，一下子也是完不成了，做一个是一个了

谢谢黑黑教程分享

马黑黑 发表于 2024-4-28 12:43

镁铝看金鱼，金鱼找樵歌，樵歌思镁铝{:4_170:}

走过岁月 发表于 2024-4-28 13:14

来欣赏小辣椒的作品

走过岁月 发表于 2024-4-28 13:14

真美啊，花在开鱼在游，美轮美奂

走过岁月 发表于 2024-4-28 13:15

边框做得也不错，大大的赞

走过岁月 发表于 2024-4-28 13:16

音乐也让人陶醉

梦油 发表于 2024-4-28 16:52

小金鱼真好看。

幸运草 发表于 2024-4-28 17:32

介个系倾听小鱼吖{:6_221:}

老谟深虑 发表于 2024-4-28 18:09

         欣赏老师的精美音画，点赞！

红影 发表于 2024-4-28 19:13

好温馨的画面，这么多动态，很完美地结合在一个帖子里，非常可爱的暖色调的制作{:4_199:}

红影 发表于 2024-4-28 19:17

颗粒文字微微变化着，颜色特别适合。欣赏亲爱的好帖，朵拉收礼开心{:4_187:}

红影 发表于 2024-4-28 19:22

仔细看，在小风车的下面面还有隐隐约约的频谱呢，配合着音乐，真棒{:4_187:}

南无月 发表于 2024-4-28 20:40

这个图片真是活了。。
小鱼自在的游。。。
花朵缓缓盛开。。
风车小播自在的转动。。
还有粒子化文字倾听。。。{:4_187:}

南无月 发表于 2024-4-28 20:43

这贴子综合了多种效果，小辣椒你真是神手。。{:4_187:}

醉美水芙蓉 发表于 2024-4-28 23:19

朵拉 发表于 2024-4-28 23:29

漂亮，谢谢小辣椒{:4_204:}
咱要好好学习哈~~

小辣椒 发表于 2024-4-29 21:09

马黑黑 发表于 2024-4-28 12:43
镁铝看金鱼，金鱼找樵歌，樵歌思镁铝

哈哈，樵哥哥会想美女？@樵歌

小辣椒 发表于 2024-4-29 21:09

走过岁月 发表于 2024-4-28 13:14
来欣赏小辣椒的作品

谢谢岁月欣赏{:4_187:}

查看完整版本: 纯音欣赏 倾听 TO：朵拉 （学习套用黑黑“遇见”效果）