如何用一个标签绘制一个loading图标第2种

先看一下效果

loading.gif

直接上代码：

HTML

CSS

/*图形*/
.loading5 {
    display: inline-block;
    color: #fff;
    width: 22px;
    height: 22px;
    position: relative;
    animation: loading5 1s linear infinite;
    margin: 28px;
    background: radial-gradient(circle at 50% 7%, rgba(30, 30, 30, 1) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 32% 11%, rgba(30, 30, 30, .96) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 19% 20%, rgba(30, 30, 30, .94) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 10% 34%, rgba(30, 30, 30, .90) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 7% 50%, rgba(30, 30, 30, .86) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 10% 66.5%, rgba(30, 30, 30, .82) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 19% 80%, rgba(30, 30, 30, .78) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 33% 89%, rgba(30, 30, 30, .74) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 50% 93%, rgba(30, 30, 30, .66) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 68% 89%, rgba(30, 30, 30, .62) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 81% 80%, rgba(30, 30, 30, .56) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 90% 66.5%, rgba(30, 30, 30, .5) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 93% 50%, rgba(30, 30, 30, .4) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 90% 34%, rgba(30, 30, 30, .3) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 81% 20%, rgba(30, 30, 30, .2) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 68% 11%, rgba(30, 30, 30, .1) 3%, rgba(0, 0, 0, 0) 4%);
}
/*旋转动画，兼容性这里就不写了，这里主要写图形代码*/
@keyframes loading5{
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}