css实现堆方块loading加载动画效果代码-html代码-BFW代码库

css实现堆方块loading加载动画效果代码

代码语言：html

代码描述：css实现堆方块loading加载动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  


  
  
<style>
@-webkit-keyframes mainAnimation {
  0% {
    width: 50px;
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  20% {
    width: 50px;
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  40% {
    width: 150px;
    transform: translateX(-50px) translateY(0px) rotate(0deg);
  }
  60% {
    width: 150px;
    transform-origin: bottom right;
    transform: translateX(-150px) translateY(0px) rotate(90deg);
  }
  80% {
    width: 50px;
    transform: translateX(-25px) translateY(0px) rotate(90deg);
  }
  100% {
    width: 50px;
    transform: translateX(-50px) translateY(0px) rotate(90deg);
  }
}
@keyframes mainAnimation {
  0% {
    width: 50px;
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  20% {
    width: 50px;
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  40% {
    width: 150px;
    transform: translateX(-50px) translateY(0px) rotate(0deg);
  }
  60% {
    width: 150px;
    transform-origin: bottom right;
    transform: translateX(-150px) translateY(0px) rotate(90deg);
  }
  80% {
    width: 50px;
    transform: translateX(-25px) translateY(0px) rotate(90deg);
  }
  100% {
    width: 50px;
    transform: translateX(-50px) translateY(0px) rotate(90deg);
  }
}
@-webkit-keyframes secundaryAnimation {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  20% {
    transform: translateX(0px) translateY(0px) rotate(180deg);
  }
  40% {
    transform: translateX(0px) translateY(0px) rotate(180deg);
  }
  60% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  80% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateX(0px) translateY(0px) rotate(180deg);
  }
}
@keyframes secundaryAnimation {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  20% {
    transform: translateX(0px) translateY(0px) rotate(180deg);
  }
  40% {
    transform: translateX(0px) translateY(0px) rotate(180deg);
  }
  60% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  80% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateX(0px) translateY(0px) rotate(180deg);
  }
}
@-webkit-keyframes shadowAnimation {
  0% {
    width: 150px;
    transform: translateX(-25px) translateY(0px) rotate(0deg);
  }
  20% {
    width: 75px;
    transform: translateX(37.5px) translateY(0px) rotate(0deg);
  }
  40% {
    width: 200px;
    transform: translateX(-25px) translateY(0px) rotate(0deg);
  }
  60% {
    width: 75px;
    transform: translateX(37.5px) translateY(0px) rotate(0deg);
  }
  80% {
    width: 75px;
    transform: translateX(37.5px) translateY(0px) rotate(0deg);
  }
  100% {
    width: 150px;
    transform: translateX(-25px.........完整代码请登录后点击上方下载按钮下载查看