css齿轮旋转loading加载动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：css齿轮旋转loading加载动画效果代码

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

<html>

<head>
    <style>
        * {
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
        }
        
        html {
          height: 100%;
        }
        
        body {
          background: #333;
          position: relative;
          height: 100%;
          margin: 0px;
        }
        
        @-webkit-keyframes clockwise {
          0% {
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          100% {
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }
        @-moz-keyframes clockwise {
          0% {
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          100% {
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }
        @-webkit-keyframes counter-clockwise {
          0% {
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          100% {
            -moz-transform: rotate(-360deg);
            -ms-transform: rotate(-360deg);
            -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
          }
        }
        @-moz-keyframes counter-clockwise {
          0% {
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          100% {
            -moz-transform: rotate(-360deg);
            -ms-transform: rotate(-360deg);
            -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
          }
        }
        .container {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -100px;
          height: 150px;
          width: 200px;
          margin-top: -75px;
        }
        
        .gearbox {
          background: #111;
          height: 150px;
          width: 200px;
          position: relative;
          border: none;
          overflow: hidden;
          -moz-border-radius: 6px;
          -webkit-border-radius: 6px;
          border-radius: 6px;
          -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
          -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
          box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
        }
        .gearbox .overlay {
          -moz-border-radius: 6px;
          -webkit-border-radius: 6px;
          border-radius: 6px;
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 10;
          -moz-box-shadow: inset 0px 0px 20px black;
          -webkit-box-shadow: inset 0px 0px 20px black;
          box-shadow: inset 0px 0px 20px black;
          -moz-transition: background 0.2s;
          -o-transition: background 0.2s;
          -webkit-transition: background 0.2s;
          transition: background 0.2s;
        }
        .gearbox.turn .overlay {
          background: transparent;
        }
        
        .gear {
          position: absolute;
          height: 60px;
          width: 60px;
          -moz-box-shadow: 0px -1px 0px 0px #888888, 0px 1px 0px 0px black;
          -webkit-box-shadow: 0px -1px 0px 0px #888888, 0px 1px 0px 0px black;
          box-shadow: 0px -1px 0px 0px #888888, 0px 1px 0px 0px black;
          -moz-border-radius: 30px;
          -webkit-border-radius: 30px;
          border-radius: 30px;
        }
        .gear.large {
          height: 120px;
          width: 120px;
          -moz-border-radius: 60px;
          -webkit-border-radius: 60px;
          border-radius: 60px;
        }
        .gear.large:after {
          height: 96px;
          width: 96px;
          -moz-border-radius: 48px;
          -webkit-border-radius: 48px;
          border-radius: 48px;
          margin-left: -48px;
          margin-top: -48px;
        }
        .gear.one {
          top: 12px;
          left: 10px;
        }
        .gear.two {
          top: 61px;
          left: 60px;
        }
        .gear.three {
          top: 110px;
          left: 10px;
        }
        .gear.four {
          top: 13px;
          left: 128px;
        }
        .gear:after {
          content: "";
          position: absolute;
          height: 36px;
          width: 36px;
          -moz-border-radius: 36px;
          -webkit-border-radius: 36px;
          border-radius: 36px;
          background: #111;
          top: 50%;
          left: 50%;
          margin-left: -18px;
          margin-top: -18px;
          z-index: 3;
          -moz-box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0, 0, 0, 0.1), inset 0px 2px 0px 0px #090909, inset 0px -1px 0px 0px #888888;
          -webkit-.........完整代码请登录后点击上方下载按钮下载查看