孤行者
本帖最后由 马黑黑 于 2024-5-11 20:57 编辑 <br /><br /><style>#papa { margin: 20px 0 20px calc(50% - 593px); width: 1024px; height: 576px; background: url('https://638183.freep.cn/638183/t24/2/guxkve.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; }
#canv3d { display: block; position: absolute; left: 220px; }
#player { position: absolute; left: 30px; top: 30px; width: 200px; height: 200px; object-fit: cover; border-radius: 50%; cursor: pointer; filter: drop-shadow(3px 3px 12px pink); z-index: 9; }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: multiply; }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2105710831" autoplay loop></audio>
<video id="player" src="https://img.tukuppt.com/video_show/2475824/00/08/39/5d21bd8878094.mp4" disablePictureInPicture autoplay loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/19/5b5368c1eeb7f.mp4" autoplay loop muted></video>
<canvas width="600" height="576" id="canv3d"></canvas>
</div>
<script>
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/js/cloth3d.js';
document.body.appendChild(sF);
var vids = document.querySelectorAll('#papa > video');
aud.onplaying = aud.onpause = () => vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
player.onclick = () => aud.paused ? aud.play() : aud.pause();
player.oncontextmenu = (e) => e.preventDefault();
</script>
本帖最后由 马黑黑 于 2024-5-11 12:37 编辑 <br /><br /><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% - 593px); <span class="tBlue">width:</span> 1024px; <span class="tBlue">height:</span> 576px; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/2/guxkve.jpg'</span>) no-repeat center/cover; <span class="tBlue">box-shadow:</span> 3px 3px 6px gray; <span class="tBlue">overflow:</span> hidden; <span class="tBlue">z-index:</span> 1; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3"> #canv3d { <span class="tBlue">display:</span> block; <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> 220px; }</cl-cd>
<cl-cd data-idx="4"> #player { <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> 30px; <span class="tBlue">top:</span> 30px; <span class="tBlue">width:</span> 200px; <span class="tBlue">height:</span> 200px; <span class="tBlue">object-fit:</span> cover; <span class="tBlue">border-radius:</span> 50%; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">filter:</span> drop-shadow(3px 3px 12px pink); z-index: 9; }</cl-cd>
<cl-cd data-idx="5"> .vid { <span class="tBlue">position:</span> absolute; <span class="tBlue">bottom:</span> 0; <span class="tBlue">width:</span> 100%; <span class="tBlue">height:</span> calc(100% + 60px); <span class="tBlue">object-fit:</span> cover; <span class="tBlue">mix-blend-mode:</span> multiply; }</cl-cd>
<cl-cd data-idx="6"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="7"> </cl-cd>
<cl-cd data-idx="8"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="9"> <<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>=2105710831"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="10"> <<span class="tDarkRed">video</span> <span class="tRed">id</span>=<span class="tMagenta">"player"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2475824/00/08/39/5d21bd8878094.mp4"</span> disablePictureInPicture autoplay loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="11"> <<span class="tDarkRed">video</span> class=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2475824/00/02/19/5b5368c1eeb7f.mp4"</span> autoplay loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="12"> <<span class="tDarkRed">canvas</span> width=<span class="tMagenta">"600"</span> height=<span class="tMagenta">"576"</span> <span class="tRed">id</span>=<span class="tMagenta">"canv3d"</span>><<span class="tDarkRed">/canvas</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>></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/cloth3d.js'</span>;</cl-cd>
<cl-cd data-idx="18"> <span class="tRed">document</span>.body.appendChild(sF);</cl-cd>
<cl-cd data-idx="19"> aud.onplaying = aud.onpause = () => aud.paused ? player.pause() : player.play();</cl-cd>
<cl-cd data-idx="20"> player.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="21"> player.oncontextmenu = (e) => e.preventDefault();</cl-cd>
<cl-cd data-idx="22"><<span class="tDarkRed">/script</span>></cl-cd>
</div> 提示：3d网布扯烂后右击还原 本帖最后由 马黑黑 于 2024-5-11 12:07 编辑
3d的网布特效作者依然是 Astralized，完成于2014年，也就是2d网布特效的次年。
帖主在原脚本代码基础上做了较多的改动，包括但不限于网布还原、读取鼠标指针依据、给网布着色等等。核心算法保留作者的成果，仅在基于随宿主元素而变更精准点击计算上做必要改动（源码的应用，原先仅限于画布宿主位于浏览器可视区域左上位置才能精准点击拉扯）。 卷布的立体效果比想象中的更好看，形成一个神秘空间。。{:4_170:}扯了几下，这个比较结实。。 这个3d的网布好，看着更漂亮呢{:4_199:} 马黑黑 发表于 2024-5-11 11:59
提示：3d网布扯烂后右击还原
不一定扯烂了才去还原啊，可以没事就右击，看这些网变色，看什么颜色困住她最适合{:4_189:} 红影 发表于 2024-5-11 12:37
不一定扯烂了才去还原啊，可以没事就右击，看这些网变色，看什么颜色困住她最适合
酱紫好浪费布料的{:4_170:} 这视频按钮真漂亮{:4_187:} 红影 发表于 2024-5-11 12:35
这个3d的网布好，看着更漂亮呢
Astralized 挺厉害的，俺准备科学上网看看能不能找到他的新作品 南无月 发表于 2024-5-11 12:25
卷布的立体效果比想象中的更好看，形成一个神秘空间。。扯了几下，这个比较结实。。
没吃午饭吧？扯布需要力气 红影 发表于 2024-5-11 12:38
这视频按钮真漂亮
要包装一下的，不然就是9块9包邮的料子 挺漂亮的，欣赏了。 这个很有意思，估计坛友还没有发现：鼠标左键按住网用力一拉，然后将鼠标放在网布上网顶部移动，网布就会变形消失！{:4_205:}{:4_204:} 这个很有意思，估计坛友还没有发现：鼠标左键按住网用力一拉，然后将鼠标放在网布上网顶部移动，网布就会变形消失！{:4_205:}{:4_204:} 马黑黑 发表于 2024-5-11 12:39
没吃午饭吧？扯布需要力气
主要是跟昨天那块布比是结实多了，只变形扯不破
再用力就扯掉下来了。
3D的材料更好一些，可以理解的嘛{:4_170:} 南无月 发表于 2024-5-11 18:05
主要是跟昨天那块布比是结实多了，只变形扯不破
再用力就扯掉下来了。
3D的材料更好一些，可以理解的嘛 ...
是的，三维的东东有XYZ三个方向连接着的更结实一点吧 transform: rotate(45deg) scale(1, 0.5);
画布上加个角度变化和大小变化，可以放大小缩小，变长变短。
平面的我试了最多放大到2倍，再大些就扯不动了。
这个立体的估计也是。{:4_170:} 执著 发表于 2024-5-11 18:05
这个很有意思，估计坛友还没有发现：鼠标左键按住网用力一拉，然后将鼠标放在网布上网顶部移动，网布就会变 ...
然后右键单击网布区域，可以重来 马黑黑 发表于 2024-5-11 18:06
是的，三维的东东有XYZ三个方向连接着的更结实一点吧
三维的动态也这么逼真。。
还有力学在里头。
想想就烧脑，代码真是无所不能。。{:4_199:}