jquery+svg实现视觉差异的进度条加载效果代码-html代码-BFW代码库

jquery+svg实现视觉差异的进度条加载效果代码

代码语言：html

所属分类：进度条

代码描述：jquery+svg实现视觉差异的进度条加载效果代码，鼠标移动可实现三维视觉差异效果。

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

<html>

<head>
    <style>
        html {
          font-size: 10px;
          background: #222;
          background: linear-gradient(to bottom, #222 0%, #000 100%);
        }
        
        body {
          font-family: "Titillium Web", sans-serif;overflow: hidden
        }
        
        @-webkit-keyframes enterAnimation {
          0% {
            transform: scale(0) translate3d(0, 0, 500px) rotateX(45deg);
          }
          100% {
            transform: scale(1) translate3d(0, 0, 0px) rotateX(0deg);
          }
        }
        
        @keyframes enterAnimation {
          0% {
            transform: scale(0) translate3d(0, 0, 500px) rotateX(45deg);
          }
          100% {
            transform: scale(1) translate3d(0, 0, 0px) rotateX(0deg);
          }
        }
        @-webkit-keyframes turnAnimation {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(-360deg);
          }
        }
        @keyframes turnAnimation {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(-360deg);
          }
        }
        @-webkit-keyframes bounceAnimation {
          0% {
            transform: translate3d(-50%, -50%, 0px);
          }
          100% {
            transform: translate3d(-50%, -50%, 50px);
          }
        }
        @keyframes bounceAnimation {
          0% {
            transform: translate3d(-50%, -50%, 0px);
          }
          100% {
            transform: translate3d(-50%, -50%, 50px);
          }
        }
        @-webkit-keyframes flickerAnimation {
          0% {
            opacity: 1;
          }
          100% {
            opacity: 0;
          }
        }
        @keyframes flickerAnimation {
          0% {
            opacity: 1;
          }
          100% {
            opacity: 0;
          }
        }
        .container {
          width: 300px;
          margin: 0 auto;
        }
        
        .inner-circle {
          width: 20em;
          height: 20em;
          border: 1px solid #ff6a13;
          border-radius: 20em;
        }
        
        .percentage {
          font-size: 4em;
          text-align: center;
          color: #fff;
          display: block;
          border: 1px solid #ff6a13;
          width: 3em;
          height: 3em;
          margin: 0 auto;
          border-radius: 3em;
          line-height: 3em;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate3d(-50%, -50%, 50px);
        }
        
        .moving-counter {
          position: absolute;
          top: 50%;
          left: 50%;
          z-index: 300;
          transform: rotate(0deg);
        }
        .moving-counter:after {
          content: "";
          display: block;
          position: absolute;
          width: 20px;
          height: 15px;
          background: white;
          top: 0;
          width: 4px;
          z-index: 1000;
          transform: translate3d(0, -400px, 180px);
        }
        
        .main-container {
          width: 100vw;
          height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: 250ms all ease-out;
          transform-style: preserve-3d;
          perspective: 1000px;
        }
        
        .svg-container {
          position: relative;
          transform-style: preserve-3d;
          -webkit-animation: enterAnimation 2500ms forwards cubic-bezier(0, 0, 0.25, 1.125);
                  animation: enterAnimation 2500ms forwards cubic-bezier(0, 0, 0.25, 1.125);
        }
        
        .........完整代码请登录后点击上方下载按钮下载查看