花飞飞 发表于 2024-10-23 14:24

【黑师代码】秋日絮语（学习黑师20241022《Our Only Hope》水波粒子效果）

本帖最后由 花飞飞 于 2024-10-23 19:39 编辑 <br /><br /><style>
        #papa { margin: 130px 0 30px calc(50% - 931px); width: 1700px; height: 900px;box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; overflow: hidden;}
       
        #msvg { display: block;   box-shadow: 2px 2px 4px gray;}
    #g1 { fill: transparent; stroke: GoldEnrod; stroke-width: 2; cursor: pointer; transform-box: fill-box; transform-origin:50% 50%; animation:rot 10s linear infinite var(--state); }
    #bg { transition: 1s;opacity: .23; }
        #vid {
                position: absolute;
                width: 50%;
                height: 50%;
                object-fit: cover;
                left:13%;
                top:38%;
                mix-blend-mode:soft-light;
                pointer-events: none;
                opacity: 0.69;
                -webkit-mask: radial-gradient(circle,   cyan, cyan,rgba(0,0,0,.35),transparent, transparent, transparent);
}
        @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa"><svg id="msvg" width="1700" height="900"></svg>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=410055747" autoplay loop></audio>
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/21/07/26/15/37/33/video60fe663dc65e1.mp4" autoplay loop muted></video>

</div>

<script>
new Promise((resolve) => {
        var sc = document.createElement('script');
        sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js';
        document.body.appendChild(sc);
        sc.onload = () => resolve();
}).then(() => {
        var dr = _dr(msvg);
        dr.image('https://642303.freep.cn/642303/tu/20241022yhsr2.webp',0,0,1700,900);
        dr.image('https://638183.freep.cn/638183/web/svg/balls2.svg',520,400,320,320).id('bg');
        dr.g('g1');
        dr.ellipse(1080,610,30,10).addTo('g1');
        dr.ellipse(1080,610,10,30).addTo('g1');
}).then(() => {
        aud.onplaying = aud.onpause = () => mState();
        g1.onclick = () => aud.paused ? aud.play() : aud.pause();
       
});

mState = () => {
    papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    bg.style.opacity = aud.paused ? 0 : .39;
    aud.paused ? vid.pause() : vid.play();
}
</script>

花飞飞 发表于 2024-10-23 14:26

@马黑黑 白老师来瞧一眼这个改过的作业哈，按道理应该可以了，不过没准儿。。{:4_173:}

梦江南 发表于 2024-10-23 16:02

欣赏老师漂亮的音画佳作。{:4_199:}

书灯 发表于 2024-10-23 17:59

漂亮{:4_204:}

红影 发表于 2024-10-23 19:49

这个把粒子拉出来单独放的，还衬个视频，很奇妙的构思。
欣赏飞飞好帖{:4_187:}

红影 发表于 2024-10-23 19:50

原来穆云寒生日了，同祝她生日快乐{:4_187:}

马黑黑 发表于 2024-10-23 21:01

奇思妙想{:4_170:}

花飞飞 发表于 2024-10-23 21:25

马黑黑 发表于 2024-10-23 21:01
奇思妙想

{:4_170:}这个就是巧 之又巧了。。图片和粒子效果可是一前一后，你看这么整是不是搭得刚刚好

花飞飞 发表于 2024-10-23 21:25

红影 发表于 2024-10-23 19:50
原来穆云寒生日了，同祝她生日快乐

影子同乐哈。。{:4_187:}

花飞飞 发表于 2024-10-23 21:25

红影 发表于 2024-10-23 19:49
这个把粒子拉出来单独放的，还衬个视频，很奇妙的构思。
欣赏飞飞好帖

各种位置都尝试了一下，这个感觉还好{:4_173:}

花飞飞 发表于 2024-10-23 21:26

书灯 发表于 2024-10-23 17:59
漂亮

感谢书灯支持{:4_187:}

花飞飞 发表于 2024-10-23 21:26

梦江南 发表于 2024-10-23 16:02
欣赏老师漂亮的音画佳作。

感谢梦江南支持{:4_187:}

马黑黑 发表于 2024-10-23 21:35

花飞飞 发表于 2024-10-23 21:25
这个就是巧 之又巧了。。图片和粒子效果可是一前一后，你看这么整是不是搭得刚刚好

一毫不差

花飞飞 发表于 2024-10-23 21:47

马黑黑 发表于 2024-10-23 21:35
一毫不差

{:4_206:}精准，喝一个去

红影 发表于 2024-10-24 21:29

花飞飞 发表于 2024-10-23 21:25
影子同乐哈。。

嗯嗯，跟着飞飞一起祝贺{:4_187:}

红影 发表于 2024-10-24 21:30

花飞飞 发表于 2024-10-23 21:25
各种位置都尝试了一下，这个感觉还好

正好是发自内心的位置，如此的秋日感慨，寓意很不错{:4_187:}

小辣椒 发表于 2024-10-25 17:09

欣赏飞飞的精美图图，播放器我找了好久{:4_170:}

小辣椒 发表于 2024-10-25 17:10

黑黑这个教程我没有看见过，还得去补一下课

花飞飞 发表于 2024-10-25 21:14

红影 发表于 2024-10-24 21:30
正好是发自内心的位置，如此的秋日感慨，寓意很不错

还真是凑巧得很

花飞飞 发表于 2024-10-25 21:15

小辣椒 发表于 2024-10-25 17:09
欣赏飞飞的精美图图，播放器我找了好久

{:4_173:}色彩问题，好象不太醒目
页: [1] 2
查看完整版本: 【黑师代码】秋日絮语（学习黑师20241022《Our Only Hope》水波粒子效果）