马黑黑 发表于 2025-8-24 09:28

不朽

本帖最后由 马黑黑 于 2025-8-25 10:22 编辑 <br /><br /><style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa {
                --offsetX: 81px;
                --bg: url('https://638183.freep.cn/638183/t24/w5/immortal.webp') no-repeat center/100% 100%;
                --ma-size: 20%;
        }
        #ma {
                right: 30px;
                top: 30px;
                background: url('https://638183.freep.cn/638183/small/2025/dream.webp') no-repeat center/cover;
                mix-blend-mode: screen;
        }
        #btnFs { bottom: 20px; color: #eee; border-color: currentColor; }
        #msvg { position: absolute; width: 100%; height: 100%; z-index: -1; }
        .cc {
                opacity: 1;
                offset-path: path('M-600 0, Q0 -180, 600 180');
                offset-distance: 0%;
                animation:
                        opacity 0.5s var(--delay) infinite alternate var(--state),
                        move 20s var(--delay) linear infinite var(--state);
        }
        @keyframes opacity { to { opacity: 0.2; } }
        @keyframes move { to { offset-distance: 100%; } }
</style>

<div id="pa">
        <audio id="audio" src="https://music.163.com/song/media/outer/url?id=2061739" autoplay loop></audio>
        <video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/35/87/5fd818a819d1e.mp4" autoplay loop muted></video>
        <div id="ma" class="opacity"></div>
        <svg id="msvg" viewbox="-320 -180 640 360">
</div>

<script type="module">
        import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';

        var dr = Dr.dr(msvg);

        Array.from({length: 60}).forEach((_,k) => {
                var cx = Math.round(Math.random() * 310 * (Math.random() > 0.5 ? 1 : -1)),
                        cy = Math.round(Math.random() * 170 * (Math.random() > 0.5 ? 1 : -1)),
                        r = Math.ceil(Math.random() * 2 + 2),
                        color = '#' + Math.random().toString(16).substring(2, 8),
                        delay = (-20 * Math.random()).toFixed(2);
                dr.circle(cx, cy, r, color).set('class', 'cc').style(`--delay: ${delay}s`);
        });

        FS(pa, ma);
</script>

马黑黑 发表于 2025-8-24 09:28

本帖最后由 马黑黑 于 2025-8-25 10:21 编辑 <br /><br /><div class="codebox">
&lt;style&gt;
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa {
                --offsetX: 81px;
                --bg: url('https://638183.freep.cn/638183/t24/w5/immortal.webp') no-repeat center/100% 100%;
                --ma-size: 20%;
        }
        #ma {
                right: 30px;
                top: 30px;
                background: url('https://638183.freep.cn/638183/small/2025/dream.webp') no-repeat center/cover;
                mix-blend-mode: screen;
        }
        #btnFs { bottom: 20px; color: #eee; border-color: currentColor; }
        #msvg { position: absolute; width: 100%; height: 100%; z-index: -1; }
        .cc {
                opacity: 1;
                offset-path: path('M-600 0, Q0 -180, 600 180');
                offset-distance: 0%;
                animation:
                        opacity 0.5s var(--delay) infinite alternate var(--state),
                        move 20s var(--delay) linear infinite var(--state);
        }
        @keyframes opacity { to { opacity: 0.2; } }
        @keyframes move { to { offset-distance: 100%; } }
&lt;/style&gt;

&lt;div id="pa"&gt;
        &lt;audio id="audio" src="https://music.163.com/song/media/outer/url?id=2061739" autoplay loop&gt;&lt;/audio&gt;
        &lt;video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/35/87/5fd818a819d1e.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;div id="ma" class="opacity"&gt;&lt;/div&gt;
        &lt;svg id="msvg" viewbox="-320 -180 640 360"&gt;
&lt;/div&gt;

&lt;script type="module"&gt;
        import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';

        var dr = Dr.dr(msvg);

        Array.from({length: 60}).forEach(() =&gt; {
                var cx = Math.round(Math.random() * 310 * (Math.random() &gt; 0.5 ? 1 : -1)),
                        cy = Math.round(Math.random() * 170 * (Math.random() &gt; 0.5 ? 1 : -1)),
                        r = Math.ceil(Math.random() * 2 + 2),
                        color = '#' + Math.random().toString(16).substring(2, 8),
                        delay = (-20 * Math.random()).toFixed(2);
                dr.circle(cx, cy, r, color).set('class', 'cc').style(`--delay: ${delay}s`);
        });

        FS(pa, ma);
&lt;/script&gt;
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

梦江南 发表于 2025-8-24 09:35

欣赏黑黑老师的新作，漂亮！{:4_187:}

杨帆 发表于 2025-8-24 09:37

漂亮！谢谢马老师精彩分享{:4_191:}

红影 发表于 2025-8-24 10:49

看到暂停粒子没消失，原来这是用svg画的粒子，沿着设定的路径前行，还有不停变化的明暗设置，漂亮{:4_199:}

红影 发表于 2025-8-24 10:55

小播选择也漂亮，好像自身是粒子的源头，能操控粒子运行一般。
小播和粒子在画面上的结合很完美{:4_187:}

红影 发表于 2025-8-24 10:59

粒子的路径没看懂，看那二次贝塞尔曲线的设置，应该是朝下凹的曲线，看帖子怎么是朝上的。
那个画小球的cx和cy的判断也没怎么看懂，这是为了在310和170上均匀分布用的吧。

红影 发表于 2025-8-24 11:01

这视频也好漂亮，和粒子在画面上相互呼应，给出了不朽的韵味{:4_187:}

马黑黑 发表于 2025-8-24 11:24

红影 发表于 2025-8-24 11:01
这视频也好漂亮，和粒子在画面上相互呼应，给出了不朽的韵味

这也看得透{:4_199:}

马黑黑 发表于 2025-8-24 11:28

红影 发表于 2025-8-24 10:59
粒子的路径没看懂，看那二次贝塞尔曲线的设置，应该是朝下凹的曲线，看帖子怎么是朝上的。
那个画小球的cx ...

运动路径：负值是将曲线网上扯，形成凸面向上的二次贝塞尔曲线，所以，粒子的运动最后是向下倾斜的。
第二个问题看下刚发的帖子。

马黑黑 发表于 2025-8-24 11:28

梦江南 发表于 2025-8-24 09:35
欣赏黑黑老师的新作，漂亮！

{:4_190:}

马黑黑 发表于 2025-8-24 11:28

杨帆 发表于 2025-8-24 09:37
漂亮！谢谢马老师精彩分享

{:4_191:}

马黑黑 发表于 2025-8-24 11:29

红影 发表于 2025-8-24 10:49
看到暂停粒子没消失，原来这是用svg画的粒子，沿着设定的路径前行，还有不停变化的明暗设置，漂亮

能不用隐藏就不用

马黑黑 发表于 2025-8-24 11:30

红影 发表于 2025-8-24 10:55
小播选择也漂亮，好像自身是粒子的源头，能操控粒子运行一般。
小播和粒子在画面上的结合很完美

这个图片是昨天帖子的背景图{:4_170:}

红影 发表于 2025-8-24 12:49

马黑黑 发表于 2025-8-24 11:30
这个图片是昨天帖子的背景图

原来是《何西 - 黑光》那个帖子的背景图啊，怪不得看着有点点眼熟{:4_173:}
聪明，这个利用很棒。

红影 发表于 2025-8-24 12:50

马黑黑 发表于 2025-8-24 11:29
能不用隐藏就不用

对的，不用隐藏就能停下是最好的了{:4_187:}

红影 发表于 2025-8-24 12:51

马黑黑 发表于 2025-8-24 11:28
运动路径：负值是将曲线网上扯，形成凸面向上的二次贝塞尔曲线，所以，粒子的运动最后是向下倾斜的。
第 ...

哈哈，我脑袋别住了，负值是向上，我咋会当做向下了，这个错误太不应该了{:4_173:}

红影 发表于 2025-8-24 12:51

马黑黑 发表于 2025-8-24 11:24
这也看得透

黑黑的制作本来就很呼应主题呢{:4_187:}

马黑黑 发表于 2025-8-24 13:09

红影 发表于 2025-8-24 12:51
黑黑的制作本来就很呼应主题呢

有一些吧，不多

马黑黑 发表于 2025-8-24 13:11

红影 发表于 2025-8-24 12:51
哈哈，我脑袋别住了，负值是向上，我咋会当做向下了，这个错误太不应该了

就算是坐标系没做改动，这里的负值都是向上的。另外的情形也有，这里不谈
页: [1] 2 3 4 5 6
查看完整版本: 不朽