【黑师代码】光的方向（学习黑师20240511《孤行者》立体画布效果）
本帖最后由 南无月 于 2024-5-20 21:39 编辑 <br /><br /><style>#papa { margin:0 0 20px calc(50% - 751px); width: 1300px; height: 750px; background: url('https://642303.freep.cn/642303/tu/0516130012be05.webp') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; position: relative; }
#canv3d { display: block; position: absolute; left: 40px; top:110px;transform: skew(-137deg) scale(1.2, 1.0);}
#player { position: absolute; right: -330px; top: -120px; width:100%; height: 100%; object-fit: cover;mix-blend-mode: screen;cursor: pointer; filter: drop-shadow(3px 3px 12px pink); clip-path: polygon(0 0,80% 0,80% 20%,100% 20%,100% 100%,0 100%);opacity: .15;}
.vid { position: absolute; bottom: 0; width: 40%; height: 40%;left:280px; object-fit: cover; mix-blend-mode: screen; transform: rotate(230deg);clip-path: polygon(0 0,80% 0,80% 20%,100% 20%,100% 100%,0 100%);}
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2139067556" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/19/81/5f154503b457d.mp4" autoplay loop muted></video>
<canvas width="600" height="576" id="canv3d"></canvas>
<video id="player" src="https://img.tukuppt.com/video_show/2269348/00/01/91/5b4d5e7a6b4a6.mp4" disablePictureInPicture autoplay loop muted></video>
</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>
<br><br><br><br><br><br>
@马黑黑 白老师来瞧瞧，跟了个立体画布的贴子 扯画布会掉。。
发现图不能太大，放大多的话就不灵敏了，宽度1300 这个设计好，可以多扯扯 马黑黑 发表于 2024-5-16 21:57
这个设计好，可以多扯扯
一扯就掉，之前一直扯不破，现在居然也可以了{:4_170:} 好玄幻的画面，让人有进入异次元的感觉，太震撼了{:4_199:} 让立体画布紧随图片里的效果，这个应该太赞了。月儿的思路真灵活{:4_199:} 那些鸟儿也是沿着圆柱光线飞行的，月儿的设计很出彩{:4_187:} 南无月 发表于 2024-5-16 21:59
一扯就掉，之前一直扯不破，现在居然也可以了
吃饱饭了有力气呗 马黑黑 发表于 2024-5-17 18:21
吃饱饭了有力气呗
{:4_173:}刚吃饱，又可以扯布了 南无月 发表于 2024-5-17 19:32
刚吃饱，又可以扯布了
有力气了 红影 发表于 2024-5-16 22:38
好玄幻的画面，让人有进入异次元的感觉，太震撼了
影子的鼓励真是给力{:4_187:} 红影 发表于 2024-5-16 22:39
让立体画布紧随图片里的效果，这个应该太赞了。月儿的思路真灵活
{:4_170:}光束的角度走，这个不难想到 红影 发表于 2024-5-16 22:40
那些鸟儿也是沿着圆柱光线飞行的，月儿的设计很出彩
谢谢影子，你的回复看了真让人开心{:4_187:} 马黑黑 发表于 2024-5-17 19:48
有力气了
大力水手吃了菠菜{:4_170:} 南无月 发表于 2024-5-17 20:12
大力水手吃了菠菜
补铁 月月这个立体效果思路非常的棒，想的出就做得出，月月好厉害，小辣椒想都没有想到这种立体的制作{:4_178:}
欣赏月月精美的制作{:4_199:} 南无月 发表于 2024-5-17 20:10
影子的鼓励真是给力
月儿的想象力很强大，看这个跟看震撼大片似的{:4_199:} 南无月 发表于 2024-5-17 20:11
光束的角度走，这个不难想到
一般不会想起这样设计啊，这样设计还能做出来，就是本事呢{:4_187:}