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

代码语言：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 {
          -webkit-transform: rotateZ(270deg) scale(1.1);
          -moz-transform: rotateZ(270deg) scale(1.1);
          transform: rotateZ(270deg) scale(1.1);
        }
        .cube-folding .leaf3::before {
          -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
          background-color: #f2f2f2;
        }
        .cube-folding .leaf4 {
          -webkit-transform: rotateZ(180deg) scale(1.1);
          -moz-transform: rotateZ(180deg) scale(1.1);
          transform: rotateZ(180deg) scale(1.1);
        }
        .cube-folding .leaf4::before {
          -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
          background-color: #e6e6e6;
        }
        
        @-webkit-keyframes folding {
          0%, 10% {
            -webkit-transform: perspective(140px) rotateX(-180deg);
            -moz-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
            -webkit-opacity: 0;
            -moz-opacity: 0;
            opacity: 0;
          }
          25%, 75% {
            -webkit-transform: perspective(140px) rotateX(0deg);
            -moz-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
            -webkit-opacity: 1;
            -moz-opacity: 1;
            opacity: 1;
          }
          90%, 100% {
            -webkit-transform: perspective(140px) rotateY(180deg);
            -moz-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
            -webkit-opacity: 0;
            -moz-opacity: 0;
            opacity: 0;
          }
        }
        @-moz-keyframes folding {
          0%, 10% {
            -webkit-transform: perspective(140px) rotateX(-180deg);
            -moz-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
            -webkit-opacity: 0;
            -moz-opacity: 0;
            opacity: 0;
          }
          25%, 75% {
            -webkit-transform: perspective(140px) rotateX(0deg);
            -moz-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
            -webkit-opacity: 1;
            -moz-opacity: 1;
            opacity: 1;
          }
          90%, 100% {
            -webkit-transform: perspective(140px) rotateY(180deg);
            -moz-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
            -webkit-opacity: 0;
            -moz-opacity: 0;
            opacity: 0;
          }
        }
        @-ms-keyframes folding {
          0%, 10% {
            -webkit-transform: perspective(140px) rotateX(-180deg);
            -moz-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
            -webkit-opacity: 0;
            -moz-opacity: 0;
            opacity: 0;
          }
          25%, 75% {
            -webkit-transform: perspective(140px) rotateX(0deg);
            -moz-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
            -webkit-opacity: 1;
            -moz-opacity: 1;
            opacity: 1;
          }
          90%, 100% {
            -webkit-transform: perspective(140px) rotateY(180deg);
            -moz-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
            -we.........完整代码请登录后点击上方下载按钮下载查看