纯css实现盒子伸展动画-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：纯css实现盒子伸展动画

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
.truck {
  width: 612px;
  height: 612px;
  transform: rotate(45deg);
  position: absolute;
  right: 50%;
  top: 50%;
  margin-top: -306px;
  margin-right: -306px;
}
.box {
  width: 100px;
  height: 100px;
  position: relative;
  float: right;
  margin: 1px;
}
.box:before {
  content: "";
  position: absolute;
  border-bottom: 51px solid #035a81;
  border-left: 0 solid transparent;
  border-right: 0 solid transparent;
  height: 0;
  width: 100%;
  bottom: 0;
  box-sizing: border-box;
  animation-name: saskiaeffect;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}
.box:after {
  content: "";
  position: absolute;
  border-top: 51px solid #035a81;
  border-left: 0 solid transparent;
  border-right: 0 solid transparent;
  height: 0;
  width: 100%;
  top: 0;
  box-sizing: border-box;
  animation-name: saskiaeffect;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}
@keyframes saskiaeffect {
  0% {
    border-left: 0 solid transparent;
    border-right: 0 solid transparent;
  }
  50% {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
  }
  100% {
    border-left: 0 solid transparent;
    border-right: 0 solid transparent;
  }
}
@-moz-keyframes saskiaeffect {
  0% {
    border-left: 0 solid transparent;
    border-right: 0 solid transparent;
  }
  50% {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
  }
  100% {
    border-left: 0 solid transparent;
    border-right: 0 solid transparent;
  }
}
.truck .box:nth-child(2),
.truck .box:nth-child(3),
.truck .box:nth-child(8),
.truck .box:nth-child(12),
.truck .box:nth-child(13),
.truck .box:nth-child(14),
.truck .box:nth-child(19),
.truck .box:nth-child(22),
.truck .box:nth-child(24),
.truck .box:nth-child(27),
.truck .box:nth-child(30),
.truck .box:nth-child(32),
.truck .box:nth-child(33),
.truck .box:nth-child(34),
.truck .box:nth-child(36) {
  transform: rotate(90deg);
}
.truck .box:nth-child(1):after,
.truck .box:nth-child(5):after,
.truck .box:nth-child(11):after,
.truck .box:nth-child(14):after,
.truck .box:nth-child(16):after,
.truck .box:nth-child(17):after,
.truck .box:nth-child(18):after,
.truck .box:nth-child(19):after,
.truck .box:nth-child(23):after,
.truck .box:nth-child(27):after,
.truck .box:nth-child(30):after,
.truck .box:nth-child(31):after,
.truck .box:nth-child(36):after {
  border-top: 51px solid #183d70;
}
.truck .box:nth-child(1):before,
.truck .box:nth-child(5):before,
.truck .box:nth-child(11):before,
.truck .box:nth-child(14):before,
.truck .box:nth-child(16):before,
.truck .box:nth-child(17):before,
.truck .box:nth-child(18):before,
.truck .box:nth-child(19):before,
.truck .box:nth-child(23):before,
.truck .box:nth-child(27):before,
.truck .box:nth-child(30):before,
.truck .box:nth-child(31):before,
.truck .box:nth-child(36):before {
  border-bottom: 51px solid #183d70;
}
.truck .box:nth-child(2):after,
.truck .box:nth-child(3):after,
.truck .box:nth-child(4):after,
.truck .box:nth-child(7):after,
.truck .box:nth-child(10):after,
.truck .box:nth-child(13):after,
.truck .box:nth-child(20):after,
.truck .box:nth-child(22):after,
.truck .box:nth-child(26):after,
.truck .box:nth-child(32):after,
.truck .box:nth-child(33):after,
.truck .box:nth-child(35):after {
  border-top: 51px solid #1f295a;
}
.truck .box:nth-child(2):before,
.truck .box:nth-child(3):before,
.truck .box:nth-child(4):before,
.truck .box:nth-child(7):before,
.truck .box:nth-child(10):before,
.truck .box:nth-child(13):before,
.truck .box:nth-child(20):before,
.truck .box:nth-child(22):before,
.truck .box:nth-child(26):before,
.truck .box:nth-child(32):before,
.truck .box:nth-child(33):before,
.truck .box:nth-child(35):before {
  border-bottom: 51px solid #1f295a;
}
.truck .box:nth-child(12):before,
.truck .box:nth-child(12):after {
  animation-delay: 0.2s;
}
.truck .box:nth-child(18):before,
.truck .box:nth-child(18):after {
  animation-delay: 0.4s;
}
.truck .box:nth-child(24):before,
.truck .box:nth-child(24):after {
  animation-delay: 0.6s;
}
.truck .box:nth-child(30):before,
.truck .box:nth-child(30):after {
  animation-delay: 0.8s;
}
.truck .box:nth-child(5):before,
.truck .box:nth-child(5):after {
  animation-delay: 0.3s;
}
.truck .box:nth-child(11):before,
.truck .box:nth-child(11):after {
  animation-delay: 0.6s;
}
.truck .box:nth-child(17):before,.........完整代码请登录后点击上方下载按钮下载查看