给大家带来一份源码，用css3怎么做出不规则图片的切换特效制作，有需要的朋友可以拿去用一下。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tweenmax不规则图片切换特效</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="container"> </div>
<script src='js/delaunay.js'></script>
<script src='js/tweenmax.js'></script>
<script>
const two_pi = math.pi * 2;
var images = [],
imageindex = 0;
var image,
imagewidth = 768,
imageheight = 485;
var vertices = [],
indices = [],
prevfrag = [],
fragments = [];
var margin = 50;
var container = document.getelementbyid('container');
var clickposition = [imagewidth * 0.5, imageheight * 0.5];
window.onload = function() {
tweenmax.set(container, {perspective:500});
// images from http://www.hdwallpapers.in
var urls = [
'images/1.jpg',
'images/2.jpg',
'images/3.jpg',
'images/4.jpg'
],
image,
loaded = 0;
// very quick and dirty hack to load and display the first image asap
images[0] = image = new image();
image.onload = function() {
if (++loaded === 1) {
for (var i = 1; i < 4; i++) {
images[i] = image = new image();
image.src = urls[i];
}
placeimage();
}
};
image.src = urls[0];
};
function placeimage(transitionin) {
image = images[imageindex];
if (++imageindex === images.length) imageindex = 0;
var num = math.random();
if(num < .25) {
image.direction = "left";
} else if(num < .5) {
image.direction = "top";
} else if(num < .75) {
image.direction = "bottom";
} else {
image.direction = "right";
}
container.appendchild(image);
image.style.opacity = 0;
if (transitionin !== false) {
triangulatein();
}
}
function triangulatein(event) {
var box = image.getboundingclientrect(),
top = box.top,
left = box.left;
if(image.direction == "left") {
clickposition[0] = 0;
clickposition[1] = imageheight / 2;
} else if(image.direction == "top") {
clickposition[0] = imagewidth / 2;
clickposition[1] = 0;
} else if(image.direction == "bottom") {
clickposition[0] = imagewidth / 2;
clickposition[1] = imageheight;
} else if(image.direction == "right") {
clickposition[0] = imagewidth;
clickposition[1] = imageheight / 2;
}
triangulate();
build();
}
function triangulate() {
for(var i = 0; i < 40; i++) {
x = -margin + math.random() * (imagewidth + margin * 2);
y = -margin + math.random() * (imageheight + margin * 2);
vertices.push([x, y]);
}
vertices.push([0,0]);
vertices.push([imagewidth,0]);
vertices.push([imagewidth, imageheight]);
vertices.push([0, imageheight]);
vertices.foreach(function(v) {
v[0] = clamp(v[0], 0, imagewidth);
v[1] = clamp(v[1], 0, imageheight);
});
indices = delaunay.triangulate(vertices);
}
function build() {
var p0, p1, p2,
fragment;
var tl0 = new timelinemax({oncomplete:buildcompletehandler});
for (var i = 0; i < indices.length; i += 3) {
p0 = vertices[indices[i + 0]];
p1 = vertices[indices[i + 1]];
p2 = vertices[indices[i + 2]];
fragment = new fragment(p0, p1, p2);
var dx = fragment.centroid[0] - clickposition[0],
dy = fragment.centroid[1] - clickposition[1],
d = math.sqrt(dx * dx + dy * dy),
rx = 30 * sign(dy),
ry = 90 * -sign(dx),
delay = d * 0.003 * randomrange(0.9, 1.1);
fragment.canvas.style.zindex = math.floor(d).tostring();
var tl1 = new timelinemax();
if(image.direction == "left") {
rx = math.abs(rx);
ry = 0;
} else if(image.direction == "top") {
rx = 0;
ry = math.abs(ry);
} else if(image.direction == "bottom") {
rx = 0;
ry = - math.abs(ry);
} else if(image.direction == "right") {
rx = - math.abs(rx);
ry = 0;
}
tl1.from(fragment.canvas, 1, {
z:-50,
rotationx:rx,
rotationy:ry,
scalex:0,
scaley:0,
ease:cubic.easein
});
tl1.from(fragment.canvas, 0.4,{alpha:0}, 0.6);
tl0.insert(tl1, delay);
fragments.push(fragment);
container.appendchild(fragment.canvas);
}
}
function buildcompletehandler() {
// add pooling?
image.style.opacity = 1;
image.addeventlistener('transitionend', function catchtrans() {
fragments.foreach(function(f) {
container.removechild(f.canvas);
});
fragments.length = 0;
vertices.length = 0;
indices.length = 0;
placeimage();
this.removeeventlistener('transitionend',catchtrans,false);
}, false);
}
//////////////
// math utils
//////////////
function randomrange(min, max) {
return min + (max - min) * math.random();
}
function clamp(x, min, max) {
return x < min ? min : (x > max ? max : x);
}
function sign(x) {
return x < 0 ? -1 : 1;
}
//////////////
// fragment
//////////////
fragment = function(v0, v1, v2) {
this.v0 = v0;
this.v1 = v1;
this.v2 = v2;
this.computeboundingbox();
this.computecentroid();
this.createcanvas();
this.clip();
};
fragment.prototype = {
computeboundingbox:function() {
var xmin = math.min(this.v0[0], this.v1[0], this.v2[0]),
xmax = math.max(this.v0[0], this.v1[0], this.v2[0]),
ymin = math.min(this.v0[1], this.v1[1], this.v2[1]),
ymax = math.max(this.v0[1], this.v1[1], this.v2[1]);
this.box = {
x:math.round(xmin),
y:math.round(ymin),
w:math.round(xmax - xmin),
h:math.round(ymax - ymin)
};
},
computecentroid:function() {
var x = (this.v0[0] + this.v1[0] + this.v2[0]) / 3,
y = (this.v0[1] + this.v1[1] + this.v2[1]) / 3;
this.centroid = [x, y];
},
createcanvas:function() {
this.canvas = document.createelement('canvas');
this.canvas.width = this.box.w;
this.canvas.height = this.box.h;
this.canvas.style.width = this.box.w + 'px';
this.canvas.style.height = this.box.h + 'px';
this.canvas.style.left = this.box.x + 'px';
this.canvas.style.top = this.box.y + 'px';
this.ctx = this.canvas.getcontext('2d');
},
clip:function() {
this.ctx.save();
this.ctx.translate(-this.box.x, -this.box.y);
this.ctx.beginpath();
this.ctx.moveto(this.v0[0], this.v0[1]);
this.ctx.lineto(this.v1[0], this.v1[1]);
this.ctx.lineto(this.v2[0], this.v2[1]);
this.ctx.closepath();
this.ctx.clip();
this.ctx.drawimage(image, 0, 0);
this.ctx.restore();
}
};//@ sourceurl=pen.js
</script>
<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'microsoft yahei';">
</div>
</body>
</html>
不规则图片的切换特效制作的代码就是这些了，更多精彩请关注其它相关文章！
相关阅读：
怎么用css3媒体查询
在html里web标准是什么
css3怎么做出响应式布局
以上就是利用css3怎么做出不规则图片的切换特效制作的详细内容。