jquery实现方块散落拆分动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：jquery实现方块散落拆分动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<style>
* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  background: #212121;
  overflow: hidden;
}

.mosaica {
  position: fixed;
  left: 2px;
  bottom: 2px;
  padding: 4px 6px;
  color: #FFFFFF;
  font-family: "Montserrat";
  font-size: 11px;
  letter-spacing: 0.06em;
}

.container {
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  top: 50%;
  perspective: 1200px;
  transform-origin: center center;
  cursor: move;
}

.plane {
  position: absolute;
  display: block;
  width: 900px;
  height: 700px;
  border: 0;
  margin: -350px 0 0 -450px;
  transform-style: preserve-3d;
}
.plane:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  z-index: -1;
  transform: translateZ(-1px);
}

.items {
  position: relative;
  background: red;
  transform-style: preserve-3d;
}

.item {
  background-color: #3B93EA;
  position: absolute;
  overflow: hidden;
  border: 1px solid #2785db;
}

@keyframes animate {
  0% {
    transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);
    transform-origin: 50% 50% 0;
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 1200px) rotateX(180deg) rotateY(360deg) rotateZ(180deg) scale3d(0, 0, 0);
    transform-origin: 50% 50% 0;
    opacity: 1;
  }
}
.item.animate {
  transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);
  transform-origin: 50% 50% 0;
  animation: animate 3s forwards;
}
</style>
</head>
<body>
<div class="mosaica">Mosaica</div>
<div class="container">
  <div id="plane1" class="plane">
    <div class="items">
      <div class="item" style="top: 0px; left: 0px; width: 250px; height: 150px; animation-delay: 1.04s;"> </div>
      <div class="item" style="top: 0px; left: 250px; width: 150px; height: 100px; animation-delay: 2.56s;"> </div>
      <div class="item" style="top: 0px; left: 400px; width: 100px; height: 150px; animation-delay: 2.36s;"> </div>
      <div class="item" style="top: 0px; left: 500px; width: 150px; height: 100px; animation-delay: 0.64s;"> </div>
      <div class="item" style="top: 0px; left: 650px; width: 100px; height: 150px; animation-delay: 1.28s;"> </div>
      <div class="item" style="top: 0px; left: 750px; width: 50px; height: 50px; animation-delay: 0.88s;"> </div>
      <div class="item" style="top: 0px; left: 800px; width: 100px; height: 50px; animation-delay: 0.44s;"> </div>
      <div class="item" style="top: 50px; left: 750px; width: 150px; height: 100px; animation-delay: 0.76s;"> </div>
      <div class="item" style="top: 100px; left: 250px; width: 150px; height: 100px; animation-delay: 1.4s;"> </div>
      <div class="item" style="top: 100px; left: 500px; width: 150px; height: 100px; animation-delay: 0.56s;"> </div>
      <div class="item" style="top: 150px; left: 0px; width: 100px; height: 100px; animation-delay: 2.12s;"> </div>
      <div class="item" style="top: 150px; left: 100px; width: 100px; height: 100px; animation-delay: 0.36s;"> </div>
      <div class="item" style="top: 150px; left: 200px; width: 50px; height: 50px; animation-delay: 2.44s;"> </div>
      <div class="item" style="top: 150px; left: 400px; width: 100px; height: 150px; animation-delay: 2.32s;"> </div>
      <div class="item" style="top: 150px; left: 650px; width: 100px; height: 150px; animation-delay: 1.8s;"> </div>
      <div class="item" style="top: 150px; left: 750px; width: 150px; height: 100px; animation-delay: 1.08s;"> </div>
      <div class="item" style="top: 200px; left: 200px; width: 50px; height: 50px; animation-delay: 0.08s;"> </div>
      <div class="item" style="top: 200px; left: 250px; width: 50px; height: 50px; animation-delay: 0s;"> </div>
      <div class="item" style="top: 200px; left: 300px; width: 100px; height: 100px; animation-delay: 1.48s;"> </div>
      <div class="item" style="top: 200px; left: 500px; width: 100px; height: 100px; animation-delay: 1.64s;"> </div>
      <div class="item" style="top: 200px; left: 600px; width: 50px; height: 50px; animation-delay: 0.48s;"> </div>
      <div class="item" style="top: 250px; left: 0px; width: 50px; height: 100px; animation-delay: 0.68s;"> </div>
      <div class="item" style="top: 250px; left: 50px; width: 100px; height: 150px; animation-delay: 2.16s;"> </div>
      <div class="item" style="top: 250px; left: 150px; width: 100px; height: 150px; animation-delay: 2.48s;"> </div>
      <div class="item" style="top: 250px; left: 250px; width: 50px; height: 50px; animation-delay: 0.52s;"> </div>
      <div class="item" style="top: 250px; left: 600px; width: 50px; height: 50px; animation-delay: 2s;"> </div>
      <div class="item" style="top: 250px; left: 750px; width: 150px; height: 100px; animation-delay: 1.16s;"> </div>
      <div class="item" style="top: 300px; left: 250px; width: 150px; height: 150px; animation-delay: 0.24s;"> </div>
      <div class="item" style="top: 300px; left: 400px; width: 50px; height: 50px; animation-delay: 2.6s;"> </div>
      <div class="item" style="top: 300px; left: 450px; width: 50px; height: 100px; animation-delay: 2.2s;"> </div>
      <div class="item" style="top: 300px; left: 500px; width: 150px; height: 100px; animation-delay: 1s;"> </div>
      <div class="item" style="top: 300px; left: 650px; width: 100px; height: 150px; animation-delay: 1.96s;"> </div>
      <div class="item" style="top: 350px; left: 0px; width: 50px; height: 50px; animation-delay: 1.76s;"> </div>
      <div class="item" style="top: 350px; l.........完整代码请登录后点击上方下载按钮下载查看