科目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>
<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2>帖子代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"> #papa { <span class="tBlue">margin:</span> 20px 0 20px calc(50% - 721px); <span class="tBlue">width:</span> 1280px; <span class="tBlue">height:</span> 800px; <span class="tBlue">background:</span> linear-gradient(to right bottom, olive, tan, white, pink); <span class="tBlue">box-shadow:</span> 3px 3px 6px gray; <span class="tBlue">z-index:</span> 1; <span class="tBlue">overflow:</span> hidden; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3"> #canv { <span class="tBlue">position:</span> absolute; <span class="tBlue">background:</span> linear-gradient(to bottom right,pink,lightgreen,lightblue,tan); }</cl-cd>
<cl-cd data-idx="4"> #player { <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> 20px; <span class="tBlue">top:</span> 20px; <span class="tBlue">width:</span> 160px; <span class="tBlue">height:</span> 160px; <span class="tBlue">z-index:</span> 3; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">animation:</span> rot 1s linear infinite <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="5"> #vid { <span class="tBlue">position:</span> absolute; <span class="tBlue">top:</span> calc(50% - 640px); <span class="tBlue">width:</span> 1280px; <span class="tBlue">height:</span> 1280px; <span class="tBlue">object-fit:</span> cover; <span class="tBlue">pointer-events:</span> none; <span class="tBlue">z-index:</span> 2; <span class="tBlue">mix-blend-mode:</span> screen; <span class="tBlue">animation:</span> rot 2s linear infinite <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="6"> @keyframes rot { to { <span class="tBlue">transform:</span> rotate(-360deg); } }</cl-cd>
<cl-cd data-idx="7"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="8"> </cl-cd>
<cl-cd data-idx="9"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="10"> <<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=5106509"</span> loop autoplay><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="11"> <<span class="tDarkRed">video</span> <span class="tRed">id</span>=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2414777/00/01/50/5b445b647f231.mp4"</span> loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="12"> <<span class="tDarkRed">img</span> <span class="tRed">id</span>=<span class="tMagenta">"player"</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/small/ujye.webp"</span> alt=<span class="tMagenta">""</span> /></cl-cd>
<cl-cd data-idx="13"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="14"> </cl-cd>
<cl-cd data-idx="15"><<span class="tDarkRed">script</span> type=<span class="tMagenta">"text/javascript"</span>></cl-cd>
<cl-cd data-idx="16"> <span class="tBlue">var</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="17"> sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/js/pic2dot.js'</span>;</cl-cd>
<cl-cd data-idx="18"> sF.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="19"> <span class="tRed">document</span>.body.appendChild(sF);</cl-cd>
<cl-cd data-idx="20"> </cl-cd>
<cl-cd data-idx="21"> <span class="tBlue">var</span> p2d = {</cl-cd>
<cl-cd data-idx="22"> <span class="tBlue">papa:</span> <span class="tMagenta">'#papa'</span>,</cl-cd>
<cl-cd data-idx="23"> <span class="tBlue">pic:</span> <span class="tMagenta">'https://638183.freep.cn/638183/t24/2/8270.jpg'</span>,</cl-cd>
<cl-cd data-idx="24"> <span class="tBlue">skip:</span> 4,</cl-cd>
<cl-cd data-idx="25"> <span class="tBlue">width:</span> 1280,</cl-cd>
<cl-cd data-idx="26"> <span class="tBlue">height:</span> 800</cl-cd>
<cl-cd data-idx="27"> };</cl-cd>
<cl-cd data-idx="28"> </cl-cd>
<cl-cd data-idx="29"> aud.onplaying = aud.onpause = () => {</cl-cd>
<cl-cd data-idx="30"> aud.paused ?</cl-cd>
<cl-cd data-idx="31"> (vid.pause(), papa.style.setProperty(<span class="tMagenta">'--state'</span>, <span class="tMagenta">'paused'</span>)) :</cl-cd>
<cl-cd data-idx="32"> (vid.play(), papa.style.setProperty(<span class="tMagenta">'--state'</span>, <span class="tMagenta">'running'</span>));</cl-cd>
<cl-cd data-idx="33"> };</cl-cd>
<cl-cd data-idx="34"> player.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="35"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
图片颗粒化效果的具体应用请参阅：
canvas画布：颗粒化图像 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)
首席沙发，欣赏学习了~~{:4_178:} 科目0，看到这标题忍不住笑{:4_173:} 这个是鼠标触碰按钮范围时和离开帖子才能看到颗粒化效果，没看到css里的操作，是封装的效果么{:4_187:} 看了代码知道，画布渐变。小点点的{:4_170:}颜色也是渐变的。。 原来还以为跟上回的抽丝一样，都是一个色儿。。。
还有背景也是设了渐变。。。
图片未加载的时候，先看到的是渐变背景色。 奇了，老师为啥不给这个视频加个透明度。。
跟如飞絮一般的大雪一样，转得满屏都是{:4_170:} 南无月 发表于 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
有些场景不需要透明度
你都对。
其实这也不是雪，是飞旋的光束。。{:4_199:} 感觉又是一个系列贴子。12345~~~{:4_173:} 马黑黑 发表于 2024-4-27 17:06
较大的图片加载时可能需要一些时间，这里使用了异步加载图片技术，在图片尚未加载完成时，实现设置的宿主 ...
异步加载图片技术
头一回听说。。
加载么，一般不是越快越好的呗。 南无月 发表于 2024-4-27 17:32
异步加载图片技术
头一回听说。。
加载么，一般不是越快越好的呗。
你想快就能快就好 马黑黑 发表于 2024-4-27 17:41
你想快就能快就好
我想是这么想的。。{:4_173:} 南无月 发表于 2024-4-27 19:16
我想是这么想的。。
为什么要用异步加载呢？道理是酱紫：
图片加载后，画布才能获取图片的像素信息，如果使用同步方式，辣么，图片还木有加载好，画布就开始工作，它画的是空白的东东。异步解决了这个问题：不管咋滴，画布我等着，图片加载好后，我再画。