css+div实现7种loading加载动画效果代码-html代码-BFW代码库

代码语言：html
代码描述：css+div实现7种loading加载动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }
        
        body,html {
            margin: 10px auto;
            text-align: center;
            background: #1c1c1d
        }
        
        * {
            color: #666
        }
        
        span {
            display: inline-block;
            height: 15px;
            width: 15px;
            background: #2FAC9B;
            border-radius: 0
        }
        
        .border-radius {
            border-radius: 500px
        }
        
        *[id*="loader-"] {
            margin-bottom: 30px
        }
        
        #loader-1 span:nth-child(1) {
            border-radius: 500px;
            -webkit-animation: scale 1s .1s infinite cubic-bezier(0.6,-0.28,0.735,0.045);
            animation: scale 1s .1s infinite cubic-bezier(0.6,-0.28,0.735,0.045)
        }
        
        #loader-1 span:nth-child(2) {
            border-radius: 500px;
            -webkit-animation: scale 1s .2s infinite cubic-bezier(0.6,-0.28,0.735,0.045);
            animation: scale 1s .2s infinite cubic-bezier(0.6,-0.28,0.735,0.045)
        }
        
        #loader-1 span:nth-child(3) {
            border-radius: 500px;
            -webkit-animation: scale 1s .3s infinite cubic-bezier(0.6,-0.28,0.735,0.045);
            animation: scale 1s .3s infinite cubic-bezier(0.6,-0.28,0.735,0.045)
        }
        
        #loader-1 span:nth-child(4) {
            border-radius: 500px;
            -webkit-animation: scale 1s .4s infinite cubic-bezier(0.6,-0.28,0.735,0.045);
            animation: scale 1s .4s infinite cubic-bezier(0.6,-0.28,0.735,0.045)
        }
        
        #loader-1 span:nth-child(5) {
            border-radius: 500px;
            -webkit-animation: scale 1s .5s infinite cubic-bezier(0.6,-0.28,0.735,0.045);
            animation: scale 1s .5s infinite cubic-bezier(0.6,-0.28,0.735,0.045)
        }
        
        #loader-2 span:nth-child(1) {
            -webkit-animation: rotateY 4s .3s infinite cubic-bezier(0.65,0.03,0.735,0.045);
            animation: rotateY 4s .3s infinite cubic-bezier(0.65,0.03,0.735,0.045)
        }
        
        #loader-2 span:nth-child(2) {
            -webkit-animation: rotateY 4s .6s infinite cubic-bezier(0.65,0.03,0.735,0.045);
            animation: rotateY 4s .6s infinite cubic-bezier(0.65,0.03,0.735,0.045)
        }
        
        #loader-2 span:nth-child(3) {
            -webkit-animation: rotateY 4s .9s infinite cubic-bezier(0.65,0.03,0.735,0.045);
            animation: rotateY 4s .9s infinite cubic-bezier(0.65,0.03,0.735,0.045)
        }
        
        #loader-2 span:nth-child(4) {
            -webkit-animation: rotateY 4s 1.2s infinite cubic-bezier(0.65,0.03,0.735,0.045);
            animation: rotateY 4s 1.2s infinite cubic-bezier(0.65,0.03,0.735,0.045)
        }
        
        #loader-2 span:nth-child(5) {
            -webkit-animation: rotateY 4s 1.5s infinite cubic-bezier(0.65,0.03,0.735,0.045);
            animation: rotateY 4s 1.5s infinite cubic-bezier(0.65,0.03,0.735,0.045)
        }
        
        #loader-3 span:nth-child(1) {
            -webkit-animation: rotateX 2s .1s infinite cubic-bezier(0.65,0.03,0.735,0.045);
            animation: rotateX 2s .1s infinite cubic-bezier(0.65,0.03,0.735,0.045)
        }
        
        #loader-3 span:nth-child(2) {
            -webkit-animation: rotateX 2s .2s infinite cubic-bezier(0.65,0.03,0.735,0.045);
            animation: rotateX 2s .2s infinite cubic-bezier(0.65,0.03,0.735,0.045)
        }
        
        #loader-3 span:nth-child(3) {
            -webkit-animation: rotateX 2s .3s infinite cubic-bezier(0.65,0.03,0.735,0.045);
            animation: rotateX 2s .3s infinite cubic-bezier(0.65,0.03,0.735,0.045)
        }
        
        #loader-3 span:nth-child(4) {
            -webkit-animation: rotateX 2s .4s infinite cubic-bezier(0.65,0.03,0.735,0.045);
            animation: rotateX 2s .4s infinite cubic-bezier(0.65,0.03,0.735,0.045)
        }
        
        #loader-3 span:nth-child(5) {
            -webkit-animation: rotateX 2s .5s infinite cubic-bezier(0.65,0.03,0.735,0.045);
            animation: rotateX 2s .5s infinite cubic-bezier(0.65,0.03,0.735,0.045)
        }
        
        #loader-4 span:nth-child(1) {
            border-radius: 500px;
            -webkit-animation: push 1s .05s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            animation: push 1s .05s infinite cubic-bezier(0.005,0.56,0.58,1.59)
        }
        
        #loader-4 span:nth-child(2) {
            border-radius: 500px;
            -webkit-animation: push 1s .1s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            animation: push 1s .1s infinite cubic-bezier(0.005,0.56,0.58,1.59)
        }
        
        #loader-4 span:nth-child(3) {
            border-radius: 500px;
            -webkit-animation: push 1s .15s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            animation: push 1s .15s infinite cubic-bezier(0.005,0.56,0.58,1.59)
        }
        
        #loader-4 span:nth-child(4) {
            border-radius: 500px;
            -webkit-animation: push 1s .2s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            animation: push 1s .2s infinite cubic-bezier(0.005,0.56,0.58,1.59)
        }
        
        #loader-4 span:nth-child(5) {
            border-radius: 500px;
            -webkit-animation: push 1s .25s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            animation: push 1s .25s infinite cubic-bezier(0.005,0.56,0.58,1.59)
        }
        
        #loader-5 span:nth-child(1) {
            border-radius: 500px;
            transform-origin: 50% 0;
            -webkit-animation: rotateZ 1s .05s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            animation: rotateZ 1s .05s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            width: 2.5px;
            height: 30px;
            margin: 0 2.5px
        }
        
        #loader-5 span:nth-child(2) {
            border-radius: 500px;
            transform-origin: 50% 0;
            -webkit-animation: rotateZ 1s .1s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            animation: rotateZ 1s .1s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            width: 2.5px;
            height: 30px;
            margin: 0 2.5px
        }
        
        #loader-5 span:nth-child(3) {
            border-radius: 500px;
            transform-origin: 50% 0;
            -webkit-animation: rotateZ 1s .15s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            animation: rotateZ 1s .15s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            width: 2.5px;
            height: 30px;
            margin: 0 2.5px
        }
        
        #loader-5 span:nth-child(4) {
            border-radius: 500px;
            transform-origin: 50% 0;
            -webkit-animation: rotateZ 1s .2s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            animation: rotateZ 1s .2s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            width: 2.5px;
            height: 30px;
            margin: 0 2.5px
        }
        
        #loader-5 span:nth-child(5) {
            border-radius: 500px;
            transform-origin: 50% 0;
            -webkit-animation: rotateZ 1s .25s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            animation: rotateZ 1s .25s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            width: 2.5px;
            height: 30px;
            margin: 0 2.5px
        }
        
        #loader-5 span:nth-child(6) {
            border-radius: 500px;
            transform-origin: 50% 0;
            -webkit-animation: rotateZ 1s .3s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            animation: rotateZ 1s .3s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            width: 2.5px;
            height: 30px;
            margin: 0 2.5px
        }
        
        #loader-5 span:nth-child(7) {
            border-radius: 500px;
            transform-origin: 50% 0;
            -webkit-animation: rotateZ 1s .35s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            animation: rotateZ 1s .35s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            width: 2.5px;
            height: 30px;
            margin: 0 2.5px
        }
        
        #loader-5 span:nth-child(8) {
            border-radius: 500px;
            transform-origin: 50% 0;
            -webkit-animation: rotateZ 1s .4s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            animation: rotateZ 1s .4s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            width: 2.5px;
            height: 30px;
            margin: 0 2.5px
        }
        
        #loader-5 span:nth-child(9) {
            border-radius: 500px;
            transform-origin: 50% 0;
            -webkit-animation: rotateZ 1s .45s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            animation: rotateZ 1s .45s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            width: 2.5px;
            height: 30px;
            margin: 0 2.5px
        }
        
        #loader-5 span:nth-child(10) {
            border-radius: 500px;
            transform-origin: 50% 0;
            -webkit-animation: rotateZ 1s .5s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            animation: rotateZ 1s .5s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            width: 2.5px;
            height: 30px;
            margin: 0 2.5px
        }
        
        #loader-6 span:nth-child(1) {
            transform-origin: 0 50%;
            transform-perspective: 100px;
            -webkit-animation: cuve 1s .5s infinite;
            animation: cuve 1s .5s infinite
        }
        
        #loader-6 span:nth-child(2) {
            transform-origin: 0 50%;
            transform-perspective: 100px;
            -webkit-animation: cuve 1s 1s infinite;
            animation: cuve 1s 1s infinite
        }
        
        #loader-6 span:nth-child(3) {
            transform-origin: 0 50%;
            transform-perspective: 100px;
            -webkit-animation: cuve 1s 1.5s infinite;
            animation: cuve 1s 1.5s infinite
        }
        
        #loader-6 span:nth-child(4) {
            transform-origin: 0 50%;
            transform-perspective: 100px;
            -webkit-animation: cuve 1s 2s infinite;
            animation: cuve 1s 2s infinite
        }
        
        #loader-6 span:nth-child(5) {
            transform-origin: 0 50%;
            transform-perspective: 100px;
            -webkit-animation: cuve 1s 2.5s infinite;
            animation: cuve 1s 2.5s infinite
        }
        
        #loader-7 span:nth-child(1) {
            -webkit-animation: temp 1s .05s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            animation: temp 1s .05s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            width: 7.5px;
            height: 7.5px;
            margin: 0 2px
        }
        
        #loader-7 span:nth-child(2) {
            -webkit-animation: temp 1s .1s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            animation: temp 1s .1s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            width: 7.5px;
            height: 7.5px;
            margin: 0 2px
        }
        
        #loader-7 span:nth-child(3) {
            -webkit-animation: temp 1s .15s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            animation: temp 1s .15s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            width: 7.5px;
            height: 7.5px;
            margin: 0 2px
        }
        
        #loader-7 span:nth-child(4) {
            -webkit-animation: temp 1s .2s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            animation: temp 1s .2s infinite cubic-bezier(0.005,0.56,0.58,1.59);
            width: 7.........完整代码请登录后点击上方下载按钮下载查看