镜中舞者（学习黑师《猫的舞步》图形裁剪旋转效果）
本帖最后由 南无月 于 2023-6-20 17:57 编辑 <br /><br /><style>#mydiv {width: 1024px;
height: 640px;
background: #ccc url('https://s1.ax1x.com/2023/06/19/pC3BBlV.md.jpg') no-repeat center / cover;
box-shadow: 0 0 6px #000;
pointer-events: none;
z-index: 1;
position: relative;
margin: 0 0 0 calc(50% - 593px);
overflow: hidden;
--clip: ''; --state: paused;
}
.pic {
position: absolute;
width: 200px;
height: 391px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
z-index: 99;
}
#vid {
position: absolute;
width: 1400px;
height: 100%;
border-radius: 2%;
opacity: .76;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
}
#mydiv::before, #mydiv::after {
position: absolute;
content: '';
width: 500px;
height: 500px;
left: 310px;
bottom: 36px;
border-radius: 50%;
pointer-events: auto;
cursor: pointer;
opacity: .65;
}
#mydiv::after {
background: #FEFEFE;
clip-path: var(--clip);
animation: scale 16s infinite alternate linear var(--state);
}
#mydiv::before {
background: url('https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/8be901bfb9ea4328b5c8c82d71f8a331~tplv-obj:500:500.image?_iz=97245&from=post&x-expires=1694908800&x-signature=Ae2u79teRRnYpKkN%2FJPwX9HIFzM%3D') no-repeat center /cover;
filter: hue-rotate(220deg);
}
@keyframes scale {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(360deg) scale(.8); }
100% { transform: rotate(-360deg) scale(1); }
}</style><div id="mydiv"><video id="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb8fa5f0765.mp4" autoplay="" loop="" muted=""></video><img class="pic" src="https://pic.imgdb.cn/item/649059991ddac507cca9dcb3.png" alt="" /></div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=2014125819" autoplay="autoplay" loop="loop"></audio> <script>(function() {
let clipBox = (xx,points,thick) => {
let a = xx / 2, pointsAr = [`${xx}px 0, 0 0, 0 ${xx}px, ${xx}px ${xx}px, ${xx}px ${xx/4}px`];
for(let i = 0; i <= points; i ++) {
let hudu = Math.PI / 90 * 180 / points * i;
let x1 = a + Math.cos(hudu) * (a - thick), y1 = a + Math.sin(hudu) * (a - thick);
pointsAr.push(x1 + 'px ' + y1 + 'px');
}
pointsAr.push(`${xx}px ${xx/4}px`);
pointsAr.push(`${xx}px 0px`);
return `polygon(${pointsAr.join(',')})`;
};
mydiv.style.setProperty('--clip',clipBox(500,8,0.2));
let mState = () => aud.paused ? (mydiv.style.setProperty('--state','paused'), vid.pause()) : (mydiv.style.setProperty('--state','running'), vid.play());
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();</script>
这个制作带来了奇妙的光影效果，太赞了，月儿好棒{:4_199:} 月儿加了个旋转光圈的动图，和背景如此贴合，带来非常美妙的效果{:4_187:} 看到月儿JS里的mydiv.style.setProperty设置有点迷糊，看到月儿设置得那么大，之前以为第一个值要和mydiv设的宽高一样大呢，但看显示又很正常，有点迷糊了{:4_173:} 红影 发表于 2023-6-20 15:55
这个制作带来了奇妙的光影效果，太赞了，月儿好棒
感谢影子一直鼓励哦{:4_173:} 红影 发表于 2023-6-20 15:57
月儿加了个旋转光圈的动图，和背景如此贴合，带来非常美妙的效果
跟着教程贴放了个GIF动图，后来看象个镜子就顺口取名了{:4_173:} 红影 发表于 2023-6-20 16:04
看到月儿JS里的mydiv.style.setProperty设置有点迷糊，看到月儿设置得那么大，之前以为第一个值要和mydiv设 ...
影子是真的厉害，JS我完全不懂，不知道咋整出来的。现在改过来了，感谢提醒{:4_187:} 醉美水芙蓉 发表于 2023-6-20 17:03
欣赏月儿美贴！
谢谢水芙蓉鼓励支持哦。。{:4_187:} 这帖名取得好。帖子质量杠杠滴 马黑黑 发表于 2023-6-20 18:13
这帖名取得好。帖子质量杠杠滴
老师夸了乐一个{:4_170:} 月月好制作，现在小辣椒纯欣赏，都不晓得黑黑到底哪个教程源码了{:4_198:} 反正效果很惊艳{:4_178:} 南无月 发表于 2023-6-20 18:00
感谢影子一直鼓励哦
月儿的小脑袋太灵了{:4_199:} 南无月 发表于 2023-6-20 18:02
跟着教程贴放了个GIF动图，后来看象个镜子就顺口取名了
月儿真的让静态的图图有了动的感觉呢{:4_187:} 南无月 发表于 2023-6-20 18:03
影子是真的厉害，JS我完全不懂，不知道咋整出来的。现在改过来了，感谢提醒
我也不懂啊，我只是感觉它的取值应该和let clipBox 是对应的，点数和厚度应该能自己调，前面那个数字不应该随意调呢。纯粹是感觉{:4_173:} 南无月 发表于 2023-6-20 18:19
老师夸了乐一个
{:4_172:} 问好老师，欣赏精彩佳作，谢谢分享！{:4_204:} 红影 发表于 2023-6-20 21:26
我也不懂啊，我只是感觉它的取值应该和let clipBox 是对应的，点数和厚度应该能自己调，前面那个数字不应 ...
影子感觉很敏锐{:4_187:} 马黑黑 发表于 2023-6-20 22:28
后来又跑去把代码读了一遍{:4_173:}