科目0：No Limit

马黑黑

马黑黑

帖子代码

<style>     #papa { margin: 20px 0 20px calc(50% - 721px); width: 1280px; height: 800px; background: linear-gradient(to right bottom, olive, tan, white, pink); box-shadow: 3px 3px 6px gray; z-index: 1; overflow: hidden; position: relative; }     #canv { position: absolute; background: linear-gradient(to bottom right,pink,lightgreen,lightblue,tan); }     #player { position: absolute; left: 20px; top: 20px; width: 160px; height: 160px; z-index: 3; cursor: pointer; animation: rot 1s linear infinite var(--state); }     #vid { position: absolute; top: calc(50% - 640px); width: 1280px; height: 1280px; object-fit: cover; pointer-events: none; z-index: 2; mix-blend-mode: screen; animation: rot 2s linear infinite var(--state); }     @keyframes rot { to { transform: rotate(-360deg); } } </style>   <div id="papa">     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=5106509" loop autoplay></audio>     <video id="vid" src="https://img.tukuppt.com/video_show/2414777/00/01/50/5b445b647f231.mp4" loop muted></video>     <img id="player" src="https://638183.freep.cn/638183/small/ujye.webp" alt="" /> </div>   <script type="text/javascript">     var sF = document.createElement('script');     sF.src = 'https://638183.freep.cn/638183/web/js/pic2dot.js';     sF.charset = 'utf-8';     document.body.appendChild(sF);       var p2d = {         papa: '#papa',         pic: 'https://638183.freep.cn/638183/t24/2/8270.jpg',         skip: 4,         width: 1280,         height: 800     };       aud.onplaying = aud.onpause = () => {         aud.paused ?             (vid.pause(), papa.style.setProperty('--state', 'paused')) :             (vid.play(), papa.style.setProperty('--state', 'running'));     };     player.onclick = () => aud.paused ? aud.play() : aud.pause(); </script>

马黑黑

图片颗粒化效果的具体应用请参阅：
canvas画布：颗粒化图像 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

朵拉

首席沙发，欣赏学习了~~

红影

科目0，看到这标题忍不住笑

红影

这个是鼠标触碰按钮范围时和离开帖子才能看到颗粒化效果，没看到css里的操作，是封装的效果么

南无月

看了代码知道，画布渐变。小点点的颜色也是渐变的。。

南无月

原来还以为跟上回的抽丝一样，都是一个色儿。。。
还有背景也是设了渐变。。。
图片未加载的时候，先看到的是渐变背景色。

南无月

奇了，老师为啥不给这个视频加个透明度。。
跟如飞絮一般的大雪一样，转得满屏都是

马黑黑

南无月 发表于 2024-4-27 16:54
看了代码知道，画布渐变。小点点的颜色也是渐变的。。

颗粒按一定间隔取原图像素值，它会携带残缺的图片信息，间隔不大时拼凑出来的效果还是完整轮廓的图片。颗粒是圆形颗粒，颗粒间的缝隙由画布下面的底色填充。

马黑黑

南无月 发表于 2024-4-27 16:56
奇了，老师为啥不给这个视频加个透明度。。
跟如飞絮一般的大雪一样，转得满屏都是

有些场景不需要透明度

马黑黑

红影 发表于 2024-4-27 14:57
这个是鼠标触碰按钮范围时和离开帖子才能看到颗粒化效果，没看到css里的操作，是封装的效果么

鼠标移进移出事件是标准的JS DOM事件。当需要实现的功能CSS无能为力时（比如需要通过编程才能获得的数据），就用JS来完成。反之，如果CSS可以完成的，就尽量使用CSS去实现。

马黑黑

南无月 发表于 2024-4-27 16:54
原来还以为跟上回的抽丝一样，都是一个色儿。。。
还有背景也是设了渐变。。。
图片未加载的时候，先看到 ...

较大的图片加载时可能需要一些时间，这里使用了异步加载图片技术，在图片尚未加载完成时，实现设置的宿主元素和其他可视元素会先被看到。不过，这些，从代码中可以了解得到。

南无月

马黑黑 发表于 2024-4-27 16:58
颗粒按一定间隔取原图像素值，它会携带残缺的图片信息，间隔不大时拼凑出来的效果还是完整轮廓的图片。颗 ...

也就是说，圆点之间缝隙里透出来的是图片的颜色。。。
小圆点里面透出来的是画布的渐变色。。
所以是图片和画布的渐变色可以一起看到。。
现在我知道为何是呈现这样的效果了。。

南无月

马黑黑 发表于 2024-4-27 16:59
有些场景不需要透明度

你都对。
其实这也不是雪，是飞旋的光束。。

南无月

感觉又是一个系列贴子。12345~~~

南无月

马黑黑 发表于 2024-4-27 17:06
较大的图片加载时可能需要一些时间，这里使用了异步加载图片技术，在图片尚未加载完成时，实现设置的宿主 ...

异步加载图片技术
头一回听说。。
加载么，一般不是越快越好的呗。

马黑黑

南无月 发表于 2024-4-27 17:32
异步加载图片技术
头一回听说。。
加载么，一般不是越快越好的呗。

你想快就能快就好

南无月

马黑黑 发表于 2024-4-27 17:41
你想快就能快就好

我想是这么想的。。

马黑黑

南无月 发表于 2024-4-27 19:16
我想是这么想的。。

为什么要用异步加载呢？道理是酱紫：

图片加载后，画布才能获取图片的像素信息，如果使用同步方式，辣么，图片还木有加载好，画布就开始工作，它画的是空白的东东。异步解决了这个问题：不管咋滴，画布我等着，图片加载好后，我再画。