css实现折纸折叠loading加载动画效果代码-html代码-BFW代码库

css实现折纸折叠loading加载动画效果代码

代码语言：html

代码描述：css实现折纸折叠loading加载动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        @import url(https://fonts.googleapis.com/css?family=Archivo+Narrow);
        .cube-folding {
          width: 50px;
          height: 50px;
          display: inline-block;
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          transform: rotate(45deg);
          font-size: 0;
        }
        .cube-folding span {
          position: relative;
          width: 25px;
          height: 25px;
          -webkit-transform: scale(1.1);
          -moz-transform: scale(1.1);
          transform: scale(1.1);
          display: inline-block;
        }
        .cube-folding span::before {
          content: "";
          background-color: white;
          position: absolute;
          left: 0;
          top: 0;
          display: block;
          width: 25px;
          height: 25px;
          -moz-transform-origin: 100% 100%;
          -ms-transform-origin: 100% 100%;
          -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
          -webkit-animation: folding 2.5s infinite linear both;
          -moz-animation: folding 2.5s infinite linear both;
          animation: folding 2.5s infinite linear both;
        }
        .cube-folding .leaf2 {
          -webkit-transform: rotateZ(90deg) scale(1.1);
          -moz-transform: rotateZ(90deg) scale(1.1);
          transform: rotateZ(90deg) scale(1.1);
        }
        .cube-folding .leaf2::before {
          -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
          background-color: #f2f2f2;
        }
        .cube-folding .leaf3 {
      .........完整代码请登录后点击上方下载按钮下载查看