论坛 › 马黑黑教程专版 › WE Don't Talk Anymore

马黑黑 发表于 2025-8-26 13:06

WE Don't Talk Anymore

本帖最后由 马黑黑 于 2025-8-26 17:25 编辑 <br /><br /><style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: url('https://img.pconline.com.cn/images/upload/upc/tx/photoblog/1812/22/c0/124764745_1545409752202.jpg') no-repeat center/cover; --ma-size: 20%; }
        #ma { left: 13.5%; top: 30px; }
        #heart { position: absolute; left: 0; bottom: 0; cursor: pointer; --dx: 0; --dy: 0; --scale: 1; }
        #heart path { transform: translate(var(--dx), var(--dy)) scale(var(--scale)); }
        #btnFs { right: 30px; top: 30px; color: beige; border-color: currentColor!important; }
</style>

<div id="pa">
        <audio id="audio" src="https://music.163.com/song/media/outer/url?id=2021988209" autoplay loop></audio>
        <video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/00/02/31/5b557e8d6a392.mp4" autoplay loop muted></video>
        <div id="ma" class="grayscale">
                <svg id="msvg" width="100%" height="100%" viewbox="-200 -200 400 400"></svg>
        </div>
        <svg id="heart" width="400" height="400"><title>ALT+X</title></svg>
</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);
        var d = 'M0 0 V30 V-10 H-15 V-20 H15 V-30 H-15 V-40 H15 V-50 H-15 V-60 H15 V-70 H-15 V-80 H15 V-90 H-15 V-100 H15 V-110 H-15 V-120 H15 V-130 H-15 V-140 H15 V-150 H-15V-160 H0 V-200';
        var tt = 10;
        Array.from({length: tt}).forEach((_,k) => {
                dr.path(d,'none', 'lightgreen', 3).transform(`rotate(${360/tt*k})`);
        });
        dr = Dr.dr(heart);
        d = 'M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z';
        Array.from({length: 3}).forEach((_, i) => {
                var x = i * 120, y = Math.random() * 260;
                dr.path(d,'pink').style(`--dx: ${x}px; --dy: ${y}px; transition: ${Math.random() + 0.3}s;`);
        });
        FS(pa, ma);
        audio.ontimeupdate = () => heart.style.setProperty('--scale', Math.random() * 0.2 + 0.8);
        heart.onclick = () => ma.click();
</script>

红影 发表于 2025-8-29 23:24

马黑黑 发表于 2025-8-29 19:36
新闻总要关注，这是公民应尽的义务。

新闻层出不穷的，关注了也不一定全关注到啊。

马黑黑 发表于 2025-8-26 13:06

<div class="codebox">
&lt;style&gt;
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: url('https://img.pconline.com.cn/images/upload/upc/tx/photoblog/1812/22/c0/124764745_1545409752202.jpg') no-repeat center/cover; --ma-size: 20%; }
        #ma { left: 13.5%; top: 30px; }
        #heart { position: absolute; left: 0; bottom: 0; cursor: pointer; --dx: 0; --dy: 0; --scale: 1; }
        #heart path { transform: translate(var(--dx), var(--dy)) scale(var(--scale)); }
        #btnFs { right: 30px; top: 30px; color: beige; border-color: currentColor!important; }
&lt;/style&gt;

&lt;div id="pa"&gt;
        &lt;audio id="audio" src="https://music.163.com/song/media/outer/url?id=2021988209" autoplay loop&gt;&lt;/audio&gt;
        &lt;video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/00/02/31/5b557e8d6a392.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;div id="ma" class="grayscale"&gt;
                &lt;svg id="msvg" width="100%" height="100%" viewbox="-200 -200 400 400"&gt;&lt;/svg&gt;
        &lt;/div&gt;
        &lt;svg id="heart" width="400" height="400"&gt;&lt;title&gt;ALT+X&lt;/title&gt;&lt;/svg&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);
        var d = 'M0 0 V30 V-10 H-15 V-20 H15 V-30 H-15 V-40 H15 V-50 H-15 V-60 H15 V-70 H-15 V-80 H15 V-90 H-15 V-100 H15 V-110 H-15 V-120 H15 V-130 H-15 V-140 H15 V-150 H-15V-160 H0 V-200';
        var tt = 10;
        Array.from({length: tt}).forEach((_,k) =&gt; {
                dr.path(d,'none', 'lightgreen', 3).transform(`rotate(${360/tt*k})`);
        });
        dr = Dr.dr(heart);
        d = 'M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z';
        Array.from({length: 3}).forEach((_, i) =&gt; {
                var x = i * 120, y = Math.random() * 260;
                dr.path(d,'pink').style(`--dx: ${x}px; --dy: ${y}px; transition: ${Math.random() + 0.3}s;`);
        });
        FS(pa, ma);
        audio.ontimeupdate = () =&gt; heart.style.setProperty('--scale', Math.random() * 0.2 + 0.8);
        heart.onclick = () =&gt; ma.click();
&lt;/script&gt;
</div>

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

花飞飞 发表于 2025-8-26 13:22

{:4_170:}从说还没做到发贴，才一支烟的功夫吧。。。。
这么完美的变大变小效果就出来了。。

花飞飞 发表于 2025-8-26 13:39

小播和心形都是绘制出来的，点击之后都可以控制暂停或者播放。。

小播V30 V-10 H-15这里的V和H好象没见过，重复出现之后能画出弯弯曲曲的直角，形状新颖。。。
画好后按36度旋转重复10次，形成现在这样放射对称的图案。。。很漂亮。。

花飞飞 发表于 2025-8-26 13:52

心形位置随机的，每次点开都不一样，
仔细看看，心跳节奏也不是有规律的固定大小，而是有大有小。
heart.style.setProperty('--scale', Math.random() * 0.2 + 0.8);
这一句是控制心形变大变小的吧，Math.random()取0的话，就是0.8了，就比原来变小了。{:4_173:}

花飞飞 发表于 2025-8-26 13:58

变大小也很神奇。。。这比透明度变化更复杂。。。{:4_173:}
回去看昨天的白粒子闪烁，对比一下

梦江南 发表于 2025-8-26 14:10

漂亮，谢谢黑黑老师的精彩分享。{:4_187:}

红影 发表于 2025-8-26 14:31

三颗心左右距离固定，上下距离是在260范围内随机的，保证了位置在一定范围内的随意。
大小也是变化的，而且不同步，和视频背景的心相互映衬，真漂亮{:4_199:}

红影 发表于 2025-8-26 14:34

小播的制作也漂亮，连续直角折线也能有这样奇妙的效果。
小播被放置在女孩的指尖，很符合帖子意境。{:4_199:}

红影 发表于 2025-8-26 14:36

WE Dont't Talk Anymore——Dont't是don't吧，是不是多了个t {:4_173:}

杨帆 发表于 2025-8-26 16:35

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

马黑黑 发表于 2025-8-26 18:08

杨帆 发表于 2025-8-26 16:35
漂亮！谢谢马老师精彩分享

{:4_190:}

马黑黑 发表于 2025-8-26 18:09

红影 发表于 2025-8-26 14:36
WE Dont't Talk Anymore——Dont't是don't吧，是不是多了个t

嗯嗯，赶时间，手指抖了一下，多了一个字母{:4_173:}

马黑黑 发表于 2025-8-26 18:09

红影 发表于 2025-8-26 14:34
小播的制作也漂亮，连续直角折线也能有这样奇妙的效果。
小播被放置在女孩的指尖，很符合帖子意境。{:4_19 ...

谢赞

马黑黑 发表于 2025-8-26 18:10

红影 发表于 2025-8-26 14:31
三颗心左右距离固定，上下距离是在260范围内随机的，保证了位置在一定范围内的随意。
大小也是变化的，而 ...

粉色加上背景和视频的映射，特别显得好看

马黑黑 发表于 2025-8-26 18:10

梦江南 发表于 2025-8-26 14:10
漂亮，谢谢黑黑老师的精彩分享。

{:4_180:}

马黑黑 发表于 2025-8-26 18:12

花飞飞 发表于 2025-8-26 13:22
从说还没做到发贴，才一支烟的功夫吧。。。。
这么完美的变大变小效果就出来了。。

小播昨晚就在这里 http://mhh.52qingyin.cn/api/svgdr/tool/ 做好，心形路径是现成的，图片是之前就收集的，视频找一下，就酱，快的

马黑黑 发表于 2025-8-26 18:13

花飞飞 发表于 2025-8-26 13:39
小播和心形都是绘制出来的，点击之后都可以控制暂停或者播放。。

小播V30 V-10 H-15这里的V和H好象没见 ...

这个只是做一下折现类型的路径，出去头尾，中间那段计算一下，用一个for语句拼接就好

马黑黑 发表于 2025-8-26 18:15

花飞飞 发表于 2025-8-26 13:52
心形位置随机的，每次点开都不一样，
仔细看看，心跳节奏也不是有规律的固定大小，而是有大有小。
heart ...

大小随音频播放进度的更新而随机变一下大小，CSS的transition取值不一样，所以动作的快慢有一点点差异性

马黑黑 发表于 2025-8-26 18:15

花飞飞 发表于 2025-8-26 13:58
变大小也很神奇。。。这比透明度变化更复杂。。。
回去看昨天的白粒子闪烁，对比一下

如果用 animation 属性做动作，也可以很简单的

查看完整版本: WE Don't Talk Anymore