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

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值