WE Don't Talk Anymore

马黑黑

红影

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

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

马黑黑

<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>

花飞飞

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

花飞飞

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

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

花飞飞

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

花飞飞

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

梦江南

漂亮，谢谢黑黑老师的精彩分享。

红影

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

红影

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

红影

WE Dont't Talk Anymore——Dont't是don't吧，是不是多了个t

杨帆

漂亮！谢谢马老师精彩分享

马黑黑

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

马黑黑

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

嗯嗯，赶时间，手指抖了一下，多了一个字母

马黑黑

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

谢赞

马黑黑

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

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

马黑黑

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

马黑黑

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

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

马黑黑

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

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

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

马黑黑

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

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

马黑黑

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

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