今天写项目的时候，想起来有些东西加载的时候，需要一些特效，如果用图片的话，比较对页面加载会稍微影响，但是不能没有，不然影响用户体验，所以就想起来以前写的css做得小demo，今天给你们分享一下，勿喷哦

text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 100%;
            padding: 3%;
            box-sizing: border-box;
            overflow: hidden;
        }
        .box .loader{
            width: 30%;
            float: left;
            height: 200px;
            margin-right: 3%;
            border: 1px solid #ccc;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;        
        }
        .loading-1{
            position: relative;
        }
        .loading-1 i{
            position: absolute;
            width: 30px;
            height: 30px;border-radius: 50%;
            background: #CCCCCC;
            left:-15px;
            top: -15px;
        }
        .loading-1 i:nth-child(1){
            animation: loading-1 1s linear infinite;
        }
        .loading-1 i:nth-child(2){
            animation: loading-1 1.8s linear infinite;
        }
        .loading-1 i:nth-child(3){
            animation: loading-1 2.6s linear infinite;
        }
        @keyframes loading-1{
            0%{transform: scale(0);opacity: 1;}
            5%{opacity: 1.5;}
            100%{transform: scale(3);opacity: 0;}
        }
        /*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
        .loading-2{
            position: relative;
            
        }
        .loading-2 i{
            position: absolute;
            border-radius: 50%;
            border-top: 3px solid transparent;
            border-bottom: 3px solid transparent;
            border-left: 3px solid #333333;
            border-right: 3px solid #333333;    
        }
        .loading-2 i:nth-child(1){
            width: 40px;
            height: 40px;
            position: absolute;
            top: -20px;
            left: -20px;
            animation: op 1s linear infinite;
        }
        .loading-2 i:nth-child(2){
            width: 25px;
            height: 25px;
            position: absolute;
            left: -12.5px;
            top: -12.5px;
            animation: lo 1s linear infinite;
        }
        @keyframes op{
            0%{transform: rotate(0deg) scale(1)}
            50%{transform: rotate(180deg) scale(1.5)}
            100%{transform: rotate(360deg) scale(1) }
        }
        @keyframes lo{
            0%{transform: rotate(0deg) scale(1) }
            50%{transform: rotate(-180deg) scale(0.5)}
            100%{transform: rotate(-360deg) scale(1) }
        }
        /*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
        .loading-3{
            position: relative;
            
        }
        .loading-3 i{
            width: 20px;height: 20px;
            border-radius: 50%;background: #333333;
            position: absolute;left: -10px;top:-10px;
        }
        .loading-3 i:nth-child(1){
            animation: ko 0.41s linear infinite;
            left: -10px;
        }
        .loading-3 i:nth-child(2){
            animation: ko 0.41s linear infinite;
            left: -30px;
        }
        .loading-3 i:nth-child(3){
            animation: ok 0.41s linear infinite;
            left: -50px;
        }
        .loading-3 i:nth-child(4){
            animation: ko 0.41s linear infinite;
            left: 10px;
        }
        .loading-3 i:nth-child(5){
            animation: ko 0.41s linear infinite;
            left: 30px;
        }
        @keyframes ok{
            20%{transform: translateY(-20px)}
            30%{transform: translateY(-20px) translateX(80px) }
            100%{transform: translateY(0px) translateX(80px)}
            }
            
            @keyframes ko{
            0%{transform: translate(0px);}
            100%{transform: translateX(-20px);}
        }
    </style>
</head>
<body>
    <div class="box">
            <div class="loader">
   <div class="loading-1">
       <i></i>
       <i></i>
       <i></i>
   </div>
            </div>
            <div class="loader">
   <div class="loading-2">
       <i class="op"></i>
       <i class="lo"></i>
   </div>
            </div>
            <div class="loader">
   <div class="loading-3">
       <i class="ok"></i>
       <i class="ko"></i>
       <i class="ko"></i>
       <i class="ko"></i>
       <i class="ko"></i>
   </div>
            </div>
        </div>
    
</body>
</html>

原文地址：https://blog.csdn.net/luckASD/article/details/52915370?ops_request_misc=&request_id=4ac4022a84dd49759bfec91d9092784e&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-28-52915370-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88