其他分享
首页 > 其他分享> > 前端花式转圈圈一些css小样式

前端花式转圈圈一些css小样式

作者:互联网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes k-loadingA{
            50% {
                height:40px;
                /* background: tomato; */
            }
            100%{
                height: 15px;
                /* background: skyblue; */
            }
        }
        @keyframes k-loadingB{
            50% {
                width:40px;
                /* background: tomato; */
            }
            100%{
                width: 15px;
                /* background: skyblue; */
            }
        }
        @keyframes k-loadingC{
            50% {
               transform: translateY(-10px);
            }
            100%{
                transform: translateY(0px);
            }
        }
        @keyframes k-loadingD{
            0% {
               transform: translateY(0px);
               opacity: 1;
            }
            30%{
                transform: translateY(0px);
                opacity: .3;
            }
            50%{
                transform: translateY(-10px);
                opacity: .8;
            }
            70%{
                transform: translateY(3px);
                opacity: .8;
            }
            85%{
                transform: translateY(-3px);
            }
            100%{
                transform: translateY(0px);
                opacity: 1;
            }
        }
        @keyframes k-loadingE{
            0%{
                transform: translateX(-200px);
                opacity: 0;
            }  
            50%{
                transform: translateX(0px);
                opacity: .8;
            } 
            100%{
                transform: translateX(200px);
                opacity: 0;
            }
        }
        @keyframes k-loadingF{ 
            0%{
                transform: rotate(120deg);
            }
            50%{
                transform: rotate(240deg);
            } 
            100%{
                transform: rotate(360deg);
            } 
        }
        @keyframes k-loadingG{ 

            50%{
                transform: rotate(180deg);
            }
            100%{
                transform: rotate(360deg);
            } 
        }
        @keyframes k-loadingI{ 
            100%{
                transform: rotate(360deg);
            } 
        }
        @-webkit-keyframes circle {
            0% {
            transform: rotate(0deg);
            }
            100% {
            transform: rotate(360deg);
            }
        }
        .loading_a{
            width: 100px;
            height: 100px;
            background: pink;
            /* display: flex;
            justify-content: space-around;
            align-items: center; */
            text-align: center;
        }
        .loading_f,.loading_g,.loading_h,.loading_i{
            width: 150px;
            height: 150px;
            text-align: center;
            background: pink;
            padding-top: 20px;
            margin-top: 20px;
        }
        .loading_b,.loading_c,.loading_d,.loading_e{
            width: 400px;
            height: 100px;
            background: hotpink;
            text-align: center;
            margin-top: 30px;
            overflow: hidden;
        }
        .loader {
            width: 400px;
            height: 100px;
            text-align: center;
            background: #F44336;
            margin-top: 30px;
            padding-top: 20px;
            overflow: hidden;
        }
        
        .k_line{
            display: inline-block;
            width: 15px;
            height: 15px;
            border-radius: 15px;
            background: skyblue;
            margin-top: 30px;
        }
        .k_lineA_1{
            animation: k-loadingA 1.2s 0s infinite;
        }
        .k_lineA_2{
            animation: k-loadingA 1.2s 0.3s infinite;
        }
        .k_lineA_3{
            animation: k-loadingA 1.2s 0.6s infinite;
        }
        .k_lineA_4{
            animation: k-loadingA 1.2s 0.9s infinite;
        }

        .k_lineB_1{
            animation: k-loadingB 1.5s 0s infinite;
        }
        .k_lineB_2{
            animation: k-loadingB 1.5s 0.3s infinite;
        }
        .k_lineB_3{
            animation: k-loadingB 1.5s 0.6s infinite;
        }
        .k_lineB_4{
            animation: k-loadingB 1.5s 0.9s infinite;
        }
        .k_lineB_5{
            animation: k-loadingB 1.5s 1.2s infinite;
        }

        .k_lineC_1{
            animation: k-loadingC 0.5s 0.1s infinite;
        }
        .k_lineC_2{
            animation: k-loadingC 0.5s 0.1s infinite;
        }
        .k_lineC_3{
            animation: k-loadingC 0.5s 0.2s infinite;
        }
        .k_lineC_4{
            animation: k-loadingC 0.5s 0.3s infinite;
        }
        .k_lineC_5{
            animation: k-loadingC 0.5s 0.4s infinite;
        }
        
        .k_lineD_1{
            animation: k-loadingD 1s 0.5s infinite;
        }
        .k_lineD_2{
            animation: k-loadingD 1s 0.6s infinite;
        }
        .k_lineD_3{
            animation: k-loadingD 1s 0.7s infinite;
        }
        .k_lineD_4{
            animation: k-loadingD 1s 0.8s infinite;
        }
        .k_lineD_5{
            animation: k-loadingD 1s 0.9s infinite;
        }

        .k_lineE_1{
            opacity: 0;
            animation: k-loadingE 2s 1.35s infinite;
            
        }
        .k_lineE_2{
            opacity: 0;
            animation: k-loadingE 2s 1.3s infinite;
        }
        .k_lineE_3{
            opacity: 0;
            animation: k-loadingE 2s 1.25s infinite;
        }
        .k_lineE_4{
            opacity: 0;
            animation: k-loadingE 2s 1.2s infinite;
        }
        .k_lineE_5{
            opacity: 0;
            animation: k-loadingE 2s 1.15s infinite;
        }
        .k_ring_1{
            width: 15px;
            height: 15px;
            margin: 0 auto;
            padding: 15px;
            border: 6px dashed #000000;
            border-radius: 50%;
            animation:k-loadingF 1s 0s linear infinite;
        }
        .k_ring_2{
            width: 50px;
            height: 50px;
            position: relative;
            border:4px solid purple;
            border-radius: 50%;
            animation:k-loadingG 1s 0s linear infinite;
        }
        .ring2_content1{
            position:absolute;
            top:-4px;
            left: -1px;
            width: 16px;
            height:16px;
            border-radius: 100%;
            background: #F44336;
        }
        .ring2_content2{
            position:absolute;
            top:-4px;
            right: -1px;
            width: 16px;
            height:16px;
            border-radius: 100%;
            background: green;
        }
        .ring2_content3{
            position:absolute;
            bottom:-4px;
            left: -1px;
            width: 16px;
            height:16px;
            border-radius: 100%;
            background: yellowgreen;
        }
        .ring2_content4{
            position:absolute;
            bottom:-4px;
            right: -1px;
            width: 16px;
            height:16px;
            border-radius: 100%;
            background: red;
        }
        .k_ring_i{
            display: inline-block;
            margin-bottom: 1.5rem;
            height: 4rem;
            width: 4rem;
            border: 0.4rem solid transparent;
            border-top-color: blue;
            border-left-color: blue;
            border-bottom-color: blue;
            animation: circle 1.5s infinite linear;
            -webkit-animation: circle 1.5s infinite linear; /* Safari 和 Chrome */
            border-radius: 50%;
        }
        
        .dot {
            width: 24px;
            height: 24px;
            background: rgb(5, 189, 245);
            border-radius: 100%;
            display: inline-block;
            animation: slide 1s infinite;
        }
        .dot:nth-child(1) {
            animation-delay: 0.1s;
            background: #5ff09b;
        }
        .dot:nth-child(2) {
            animation-delay: 0.2s;
            background: #10f4fc;
        }
        .dot:nth-child(3) {
            animation-delay: 0.3s;
            background: pink;
        }
        .dot:nth-child(4) {
            animation-delay: 0.4s;
            background: #b5f505;
        }
        .dot:nth-child(5) {
            animation-delay: 0.5s;
            background: #8f85ee;
        }
        @keyframes slide {
            0% {
            transform: scale(1);
            }
            50% {
                opacity: 0.3;
                transform: scale(2.5);
            }
            100% {
                transform: scale(1);
            }
        }
        .loader1{
            width: 150px;
            height: 150px;
            text-align: center;
            background: goldenrod;
            margin-top: 30px;
            padding-top: 50px;
            overflow: hidden;
        }
        @keyframes circlechange2 {
            0% {
            transform: scale(1);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }
        @keyframes circlechange1 {
            0% {
            transform: scale(1.2);
            }
            50% {
                transform: scale(1);
            }
            100% {
                transform: scale(1.2);
            }
        }
        .bigCircle{
            width: 50px;
            height: 50px;
            background: rgba(255,255,255,0.5);
            padding: 20px;
            border-radius: 50%;
            margin: 0 auto;
            animation: circlechange1 1s infinite;
        }    
        .smallCircle{
            width: 30px;
            height: 30px;
            background: #fff;
            opacity: .7;
            z-index: 2;
            border-radius: 50%; 
            margin: 0 auto;
            margin-top: 10px;
            animation: circlechange2 1s infinite;
        }
        @keyframes circleleft {
            0% {
                transform: rotate(360deg);
            }
            100% {
                transform: scale(0deg);
            }
        }
        .loader2{
            width: 150px;
            height: 150px;
            text-align: center;
            background: goldenrod;
            margin-top: 30px;
            padding-top: 50px;
            overflow: hidden;
        }
        .loader2_fu{
            position: relative;
            width: 100px;
            height:100px;
            border-radius: 50%;
            border:6px solid rgba(255,255,255,0.5);
            border-left-color:rgba(255,255,255,1);
            margin: 0 auto;
            animation: circleleft 1s linear infinite;
        }
        @keyframes sijiao1 {
            0%{
                transform: translate3d(0,0,0);
            }
            50%{
                transform: translate3d(-200%,-200%,0);
            }
            100%{
                transform: translate3d(0,0,0);
            }
        }
        @keyframes sijiao2 {
            0%{
                transform: translate3d(0,0,0);
            }
            50%{
                transform: translate3d(200%,-200%,0);
            }
            100%{
                transform: translate3d(0,0,0);
            }
        }
        @keyframes sijiao3 {
            0%{
                transform: translate3d(0,0,0);
            }
            50%{
                transform: translate3d(-200%,200%,0);
            }
            100%{
                transform: translate3d(0,0,0);
            }
        }
        @keyframes sijiao4 {
            0%{
                transform: translate3d(0,0,0);
            }
            50%{
                transform: translate3d(200%,200%,0);
            }
            100%{
                transform: translate3d(0,0,0);
            }
        }
        .loader3{
            width: 200px;
            height: 115px;
            text-align: center;
            background: rgb(32, 181, 218);
            margin-top: 30px;
            padding-top: 85px;
        }
        .loader3_fu{
            margin: 0 auto;
            width: 60px;
            height: 60px;
            text-align: center;
            position: relative;
            
        }
        .sijiao{
            position: absolute;
            width: 30px;
            height:30px;
            border-radius: 50%;
        }
        .jiao1{
            background: rgb(251, 255, 0);
            top: -25%;
            left: -25%;
            animation: sijiao4 1.5s infinite; 
        }
        .jiao2{
            background: rgb(255, 102, 0);
            bottom: -25%;
            left: -25%;
            animation: sijiao2 1.5s infinite; 
        }
        .jiao3{
            background: rgb(0, 255, 0);
            right:-25%;
            top: -25%;
            animation: sijiao3 1.5s infinite; 
        }
        .jiao4{
            background: rgb(212, 0, 255);
            bottom: -25%;
            right: -25%;
            animation: sijiao1 1.5s infinite; 
        }
    </style>
</head>
<body>
    <div class="loading_a">
        A
        <div class="k_line k_lineA_1"></div>
        <div class="k_line k_lineA_2"></div>
        <div class="k_line k_lineA_3"></div>
        <div class="k_line k_lineA_4"></div>
    </div>
    <div class="loading_b">
        B
        <div class="k_line k_lineB_1"></div>
        <div class="k_line k_lineB_2"></div>
        <div class="k_line k_lineB_3"></div>
        <div class="k_line k_lineB_4"></div>
        <div class="k_line k_lineB_5"></div>
    </div>
    <div class="loading_c">
        C
        <div class="k_line k_lineC_1"></div>
        <div class="k_line k_lineC_2"></div>
        <div class="k_line k_lineC_3"></div>
        <div class="k_line k_lineC_4"></div>
        <div class="k_line k_lineC_5"></div>
    </div>
    <div class="loading_d">
        D
        <div class="k_line k_lineD_1"></div>
        <div class="k_line k_lineD_2"></div>
        <div class="k_line k_lineD_3"></div>
        <div class="k_line k_lineD_4"></div>
        <div class="k_line k_lineD_5"></div>
    </div>
    <div class="loader3">
        <div class="loader3_fu">
            <div class="sijiao jiao1"></div>
            <div class="sijiao jiao2"></div>
            <div class="sijiao jiao3"></div>
            <div class="sijiao jiao4"></div>
        </div>
    </div>
    <div class="loading_e">
        E
        <div class="k_line k_lineE_1"></div>
        <div class="k_line k_lineE_2"></div>
        <div class="k_line k_lineE_3"></div>
        <div class="k_line k_lineE_4"></div>
        <div class="k_line k_lineE_5"></div>
    </div>
    <div class="loading_f">
        F
        <div class="k_ring_1"></div>
    </div>
    <div class="loading_g">
        G
        <div class="k_ring_2">
            <div class="ring2_content1">

            </div>
        </div>
    </div>
    <div class="loading_h">
        H
        <div class="k_ring_2">
            <div class="ring2_content1">

            </div>
            <div class="ring2_content2">

            </div>
            <div class="ring2_content3">

            </div>
            <div class="ring2_content4">

            </div>
        </div>
    </div>
    <div class="loader2">
        <div class="loader2_fu">
        </div>
    </div>
    <div class="loading_i">
        I
        <div class="k_ring_i"></div>
    </div>
    <div class="loader">
        dot
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
    <div class="loader1">
        <div class="bigCircle">
            <div class="smallCircle">
            </div>
        </div>
    </div>
   
    
</body>
</html>

标签:transform,转圈圈,width,animation,css,background,infinite,height,花式
来源: https://www.cnblogs.com/dajingdehuayuan/p/14954450.html