Question

我正在寻找一个使用CSS创建玻璃碎片效果的脚本，但我找不到任何东西。

我用过这个，但是

＆＃13;

// triangulation using https://github.com/ironwallaby/delaunay

// For more check out zachsaucier.com

const TWO_PI = Math.PI * 2;

var images = [],
  imageIndex = 0;

var image,
  imageWidth = 50,
  imageHeight = 50;

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 = [
      'http://i.imgur.com/QddsEpk.jpg',
      'http://i.imgur.com/OeDykaH.jpg',
      'http://i.imgur.com/lLHspCj.jpg',
      'http://i.imgur.com/tCz9GQS.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;
  } < script >

  //////////////
  // 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();
  }
};

＆＃13;

body {
  background-color: #000;
  margin: 0;
  overflow: hidden;
}
canvas {
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
}
img {
  position: absolute;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}
#container {
  position: absolute;
  width: 25px;
  height: 25px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

＆＃13;

<div id="container"></div>

＆＃13;

主要代码来自here，但我希望使用CSS

这样的玻璃破碎

Answer 1

因此虽然我没有使用CSS3打破玻璃的具体例子，但我确实建议这种效果在玻璃破碎时效果很好：

http://www.species-in-pieces.com/

正如您所注意到的那样，他们使用CSS3多边形来渲染动物的形状。以下是该网站的示例片段：

-webkit-clip-path: polygon(44.65% 39.571%, 35.85% 59.429%, 52.85% 50.857%);
-webkit-transition-duration: .8s;
-moz-transition-duration: .8s;
 transition-duration: .8s;

基本上，您可以通过每个定义的多边形为效果定义webkit变换。使用这样的功能的缺点是它目前仅在webkit浏览器中受支持，但同时这种动画影响很难在CSS中进行跨浏览器支持。

如果我有一段时间，我明天会来，快速做一个破碎的小提琴

如何用文字获得玻璃破碎效果

1 个答案: