css彩色圆点融合loading加载动画效果代码-html代码-BFW代码库

css彩色圆点融合loading加载动画效果代码

代码语言：html

代码描述：css彩色圆点融合loading加载动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          background: #ffffff;
        }
        
        .dots {
          width: 0;
          height: 0;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          margin: auto;
          filter: url(#goo);
        }
        
        .dot {
          width: 0;
          height: 0;
          position: absolute;
          left: 0;
          top: 0;
        }
        .dot:before {
          content: "";
          width: 35px;
          height: 35px;
          border-radius: 50px;
          background: #FBD301;
          position: absolute;
          left: 50%;
          transform: translateY(0) rotate(0deg);
          margin-left: -17.5px;
          margin-top: -17.5px;
        }
        @-webkit-keyframes dot-move {
          0% {
            transform: translateY(0);
          }
          18%, 22% {
            transform: translateY(-70px);
          }
          40%, 100% {
            transform: translateY(0);
          }
        }
        @keyframes dot-move {
          0% {
            transform: translateY(0);
          }
          18%, 22% {
            transform: translateY(-70px);
          }
          40%, 100% {
            transform: translateY(0);
          }
        }
        @-webkit-keyframes dot-colors {
          0% {
            background-color: #FBD301;
          }
          25% {
            background-color: #FF3270;
          }
          50% {
            background-color: #208BF1;
          }
          75% {
            background-color: #AFE102;
          }
          100% {
            background-color: #FBD301;
          }
        }
        @keyframes dot-colors {
          0% {
            background-color: #FBD301;
          }
          25% {
            background-color: #FF3270;
          }
          50% {
            background-color: #208BF1;
          }
          75% {
            background-color: #AFE102;
          }
          100% {
            background-color: #FBD301;
          }
        }
        .dot:nth-child(5):before {
          z-index: 100;
          width: 45.5px;
          height: 45.5px;
          margin-left: -22.75px;
          margin-top: -22.75px;
          -webkit-animation: dot-colors 4s ease infinite;
                  animation: dot-colors 4s ease infinite;
        }
        @-webkit-keyframes dot-rotate-1 {
          0% {
            transform: rotate(-105deg);
          }
          100% {
            transform: rotate(270deg);
          }
        }
        @keyframes dot-rotate-1 {
          0% {
            transform: rotate(-105deg);
          }
          100% {
            transform: rotate(270deg);
          }
        }
        .dot:nth-child(1) {
          -webkit-animation: dot-rotate-1 4s 0s linear infinite;
                  animation: dot-rotate-1 4s 0s linear infinite;
        }
        .dot:nth-child(1):before {
          background-color: #FF3270;
          -webkit-animation: dot-move 4s 0s ease infinite;
               .........完整代码请登录后点击上方下载按钮下载查看