css实现一个Loading效果

水深无声 2022-10-23 14:22 230阅读 0赞

<div class="load">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

<style>
            .load{ 
                width: 100px;
                height: 100px;
                position: relative;
                margin: 0 auto;
                margin-top:100px;
            }
            .load span{ 
                display: inline-block;
                opacity: 0.1;
                width: 17px;
                height: 17px;
                border-radius: 50%;
                background: #fbc2eb;
                position: absolute;
                -webkit-animation: load 1.04s ease infinite;
            }
            @-webkit-keyframes load{ 
                0%{ 
                    opacity: 1;
                }
                100%{ 
                    opacity: 0.1;
                }
            }
            .load span:nth-child(1){ 
                left: 5px;
                top: 50%;
                margin-top: -8px;
                -webkit-animation-delay: 0.13s;
            }
            .load span:nth-child(2){ 
                left: 15px;
                top: 15px;
                -webkit-animation-delay: 0.26s;
            }
            .load span:nth-child(3){ 
                left: 50%;
                top: 5px;
                margin-left: -8px;
                -webkit-animation-delay: 0.39s;
            }
            .load span:nth-child(4){ 
                top: 15px;
                right: 15px;
                -webkit-animation-delay: 0.52s;
            }
            .load span:nth-child(5){ 
                right: 5px;
                top: 50%;
                margin-top: -8px;
                -webkit-animation-delay: 0.65s;
            }
            .load span:nth-child(6){ 
                right: 15px;
                bottom: 15px;
                -webkit-animation-delay: 0.78s
            }
            .load span:nth-child(7){ 
                bottom: 5px;
                left: 50%;
                margin-left: -8px;
                -webkit-animation-delay: 0.91s;
            }
            .load span:nth-child(8){ 
                bottom: 15px;
                left: 15px;
                -webkit-animation-delay: 1.04s;
            }
        </style>

效果图大概如下：  
![在这里插入图片描述][20210305181830669.gif_pic_center]

[20210305181830669.gif_pic_center]: /images/20221023/a5ecb1250b444ca79fde92b2a493809b.png