纯css3+js打造旋转剪切动效

Html

Css

body {
	background:#000;
}
img {
	width:600px;
	height:600px;
	border:0;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
}

var bannerX1 = 50,
/*(第四个点) 从51到100*/
bannerY2 = 0,
/*(第五个点) 从1到100*/
bannerX3 = 100,
/*(第六个点) 从100到0*/
bannerY4 = 100,
/*(第七个点) 从100到0*/
bannerX5 = 0,
/*(第八个点) 从0到50*/
oImg = document.getElementById('img');

//前三个坐标不用动
function rotate(bannerX1, bannerY2, bannerX3, bannerY4, bannerX5) {
    // 解决浮点数问题
    if (bannerX1 >= 100) bannerX1 = Math.round(bannerX1) + 1;
    if (bannerY2 >= 100) bannerY2 = Math.round(bannerY2) + 1;
    if (bannerX3 <= 0) bannerX3 = Math.round(bannerX3) - 1;
    if (bannerY4 <= 0) bannerY4 = Math.round(bannerY4) - 1;

if (bannerX1 >= 50 && bannerX1 <= 100) {
        oImg.setAttribute("style", "clip-path:polygon(0 0,50% 0%,50% 50%, " + bannerX1 + "% 0,   100% 0,100% 50%,100% 100%, 50% 100%, 0 100% ,0 50%);-webkit-clip-path:polygon(0 0,50% 0%,50% 50%, " + bannerX1 + "% 0,   100% 0,100% 50%,100% 100%, 50% 100%, 0 100% ,0 50%)");
    } else if (bannerX1 == 101 && bannerY2 >= 0 && bannerY2 <= 100 && bannerX3 == 100) {
        oImg.setAttribute("style", "clip-path:polygon(0 0,50% 0%,50% 50%,100% " + bannerY2 + "%, 100% 50%, 100% 100% ,50% 100%, 0 100% ,0 50%);-webkit-clip-path:polygon(0 0,50% 0%,50% 50%,100% " + bannerY2 + "%, 100% 50%, 100% 100% ,50% 100%, 0 100% ,0 50%)");
    } else if (bannerY2 == 101 && bannerX3 <= 100 && bannerX3 >= 0 && bannerY4 == 100) {
        oImg.setAttribute("style", "clip-path:polygon(0 0,50% 0%,50% 50%, " + bannerX3 + "% 100%, 0 100%);-webkit-clip-path:polygon(0 0,50% 0%,50% 50%, " + bannerX3 + "% 100%, 0 100%)");
    } else if (bannerX3 == -1 && bannerY4 >= 0 && bannerY4 <= 100 && bannerX5 == 0) {
        oImg.setAttribute("style", "clip-path:polygon(0 0,50% 0%,50% 50%, 0 " + bannerY4 + "% ,0 100%);-webkit-clip-path:polygon(0 0,50% 0%,50% 50%, 0 " + bannerY4 + "% ,0 100%)");
    } else if (bannerY4 == -1 && bannerX5 <= 50) {
        oImg.setAttribute("style", "clip-path:polygon(0 0,50% 0%,50% 50%," + bannerX5 + "% 0);-webkit-clip-path:polygon(0 0,50% 0%,50% 50%," + bannerX5 + "% 0)");
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

纯css3+js打造旋转剪切动效



代码描述：2D旋转的剪切效果，可对某张图片进行剪切。

2D旋转的剪切效果，可对某张图片进行剪切。

1

最新

发表评论全部评论

暂时没有评论！

微笑的生命0

2021/8/3 17:49:18

怎么反过来，现在从有到无，我想要反过来回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

geekFeier

相关代码

纯css3+js打造旋转剪切动效

最新