css图片旋转动效,纯css3+js打造旋转剪切动效

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)");

}

}

function bannerX1F() {

if (bannerX1 >= 50 && bannerX1 <= 100 && bannerY2 == 0) {

setTimeout(function() {

rotate(bannerX1, bannerY2, bannerX3, bannerY4, bannerX5);

bannerX1 = bannerX1 + 0.1;

return bannerX1F();

},

0.01);

} else {

return bannerY2F();

}

}

bannerX1F();

function bannerY2F() {

if (bannerY2 >= 0 && bannerY2 <= 100) {

setTimeout(function() {

rotate(bannerX1, bannerY2, bannerX3, bannerY4, bannerX5);

bannerY2 = bannerY2 + 0.1;

return bannerY2F();

},

0.01);

} else {

return bannerX3F();

}

}

function bannerX3F() {

if (bannerX3 <= 100 && bannerX3 >= 0) {

setTimeout(function() {

rotate(bannerX1, bannerY2, bannerX3, bannerY4, bannerX5);

bannerX3 = bannerX3 - 0.1;

return bannerX3F();

},

0.01);

} else {

return bannerY4F();

}

}

function bannerY4F() {

if (bannerY4 <= 100 && bannerY4 >= 0) {

setTimeout(function() {

rotate(bannerX1, bannerY2, bannerX3, bannerY4, bannerX5);

bannerY4 = bannerY4 - 0.1;

return bannerY4F();

},

0.01);

} else {

return bannerX5F();

}

}

function bannerX5F() {

if (bannerX5 <= 50 && bannerX5 >= 0) {

setTimeout(function() {

rotate(bannerX1, bannerY2, bannerX3, bannerY4, bannerX5);

bannerX5 = bannerX5 + 0.1;

return bannerX5F();

},

0.01);

} else {

return reload();

}

}

function reload() {

window.location.reload();

}