亚伦影音工作室 发表于 2025-7-15 22:33

拆散/合并

本帖最后由 亚伦影音工作室 于 2025-7-16 11:45 编辑 <br /><br /><style>
#but{margin: 140px 180px ;width: 450px; height: 250px;   position: relative; cursor: pointer;background:
url(https://pic1.imgdb.cn/item/6873549658cb8da5c8a6e782.gif) no-repeat 30px 10px/40%,url(https://pic1.imgdb.cn/item/6805ade358cb8da5c8ba9e03.webp) no-repeat center/100% 100%; }

#enopg{ position: absolute;width: 450px; height: 250px; background:url(https://pic1.imgdb.cn/item/6805ade358cb8da5c8ba9e03.webp) no-repeat center/100% 100%;
clip-path: polygon(50% 50%, 0 100%, 100% 100%);
transition: 0.5s;top:-100%;
}
#cndpt{position: absolute; width: 450px; height: 250px;   background:url(https://pic1.imgdb.cn/item/6805ade358cb8da5c8ba9e03.webp) no-repeat center/100% 100%;clip-path: polygon(50% 50%, 0 0, 100% 0);
top:100%;transition: 0.5s;
}
#zuo{ position: absolute;width: 450px; height: 250px; background:url(https://pic1.imgdb.cn/item/6805ade358cb8da5c8ba9e03.webp) no-repeat center/100% 100%;
transition: 0.5s;left: 100%;clip-path: polygon(50% 50%, 0 100%, 0 0);
}
#you{ position: absolute;width: 450px; height: 250px; background:url(https://pic1.imgdb.cn/item/6805ade358cb8da5c8ba9e03.webp) no-repeat center/100% 100%;
transition: 0.5s;left: -100%;clip-path: polygon(50% 50%, 100% 100%, 100% 0);
}

</style>
<div id="but" >
<div id="cndpt"></div>
<div id="zuo"></div>
<div id="you"></div>
<div id="enopg" ></div>
</div>
<audio id="aud" src="https://s2.cldisk.com/sv-w7/audio/31/5c/8e/c94454681bc93212751bc46d6cd20d50/audio.mp3" autoplay loop></audio>
<script >
but.onclick = () => aud.paused ? (aud.play(),enopg.style.top= '-100%',cndpt.style.top= '100%',zuo.style.left= '100%',you.style.left= '-100%') : (aud.pause(),enopg.style.top= '0%',cndpt.style.top = '0%',zuo.style.left= '0%',you.style.left= '0%');
</script >

红影 发表于 2025-7-16 09:38

这个厉害了，是同样的图图，上面一张交叉线分成四份，再和原图结合起来，竟然那么漂亮，一点不违和。
点击还能合并起来，并遮挡掉美丽的白鹤{:4_199:}

红影 发表于 2025-7-16 09:39

这个太神奇了，看得惊叹不已。
欣赏亚伦老师好帖{:4_199:}

亚伦影音工作室 发表于 2025-7-16 11:55

左上 clip-path: polygon(0 0, 50% 0, 50% 50%, 50% 50%, 0 50%);
右上clip-path: polygon(100% 0, 50% 0, 50% 50%, 50% 50%, 100% 50%);
右下clip-path: polygon(100% 100%, 50% 100%, 50% 50%, 50% 50%, 100% 50%);
左下clip-path: polygon(0 100%, 50% 100%, 50% 50%, 50% 50%, 0 50%);

老谟深虑 发表于 2025-7-16 12:38

            很有意思，老师辛苦了！

梦油 发表于 2025-7-16 13:51

欣赏佳作，问候亚伦。

杨帆 发表于 2025-7-16 20:57

奇妙的构思，奇特的效果，谢谢亚伦老师经典分享{:4_190:}
页: [1]
查看完整版本: 拆散/合并