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

广告位

loading2.gif HTML: <b class=”loading2″></b>…

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

loading2.gif

HTML:

<b class="loading2"></b> 

CSS:

/*初始图形*/ .loading2 {     display: inline-block;     color: #fff;     width: 40px;     height: 40px;     border-radius: 50%;     position: relative;     background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 18%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 00%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 18%, transparent 00%) no-repeat;     animation: load3din 2s linear infinite; }  /*图画图形*/ @keyframes load3din2{     0% {         background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 10%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%);     }     2% {         background: radial-gradient(circle at 45%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 11%, transparent 00%), radial-gradient(circle at 55%, rgba(255, 187, 050, 0.8) 17%, transparent 00%);     }     4% {         background: radial-gradient(circle at 40%, rgba(051, 181, 229, 0.8) 16%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 12%, transparent 00%), radial-gradient(circle at 60%, rgba(255, 187, 050, 0.8) 16%, transparent 00%);     }     6% {         background: radial-gradient(circle at 35%, rgba(051, 181, 229, 0.8) 15%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 13%, transparent 00%), radial-gradient(circle at 65%, rgba(255, 187, 050, 0.8) 15%, transparent 00%);     }     8% {         background: radial-gradient(circle at 30%, rgba(051, 181, 229, 0.8) 14%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 14%, transparent 00%), radial-gradient(circle at 70%, rgba(255, 187, 050, 0.8) 14%, transparent 00%);     }     10% {         background: radial-gradient(circle at 25%, rgba(051, 181, 229, 0.8) 13%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 15%, transparent 00%), radial-gradient(circle at 75%, rgba(255, 187, 050, 0.8) 13%, transparent 00%);     }     12% {         background: radial-gradient(circle at 20%, rgba(051, 181, 229, 0.8) 12%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 16%, transparent 00%), radial-gradient(circle at 80%, rgba(255, 187, 050, 0.8) 12%, transparent 00%);     }     14% {         background: radial-gradient(circle at 15%, rgba(051, 181, 229, 0.8) 11%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 85%, rgba(255, 187, 050, 0.8) 11%, transparent 00%);     }     16% {         background: radial-gradient(circle at 12%, rgba(051, 181, 229, 0.8) 10%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 88%, rgba(255, 187, 050, 0.8) 10%, transparent 00%);     }     18% {         background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 12%, rgba(051, 181, 229, 0.8) 10%, transparent 00%), radial-gradient(circle at 88%, rgba(255, 187, 050, 0.8) 10%, transparent 00%);     }     20% {         background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 15%, rgba(051, 181, 229, 0.8) 11%, transparent 00%), radial-gradient(circle at 85%, rgba(255, 187, 050, 0.8) 11%, transparent 00%);     }     22% {         background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 20%, rgba(051, 181, 229, 0.8) 12%, transparent 00%), radial-gradient(circle at 80%, rgba(255, 187, 050, 0.8) 12%, transparent 00%);     }     24% {         background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 25%, rgba(051, 181, 229, 0.8) 13%, transparent 00%), radial-gradient(circle at 75%, rgba(255, 187, 050, 0.8) 13%, transparent 00%);     }     26% {         background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 30%, rgba(051, 181, 229, 0.8) 14%, transparent 00%), radial-gradient(circle at 70%, rgba(255, 187, 050, 0.8) 14%, transparent 00%);     }     28% {         background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 35%, rgba(051, 181, 229, 0.8) 15%, transparent 00%), radial-gradient(circle at 65%, rgba(255, 187, 050, 0.8) 15%, transparent 00%);     }     30% {         background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 40%, rgba(051, 181, 229, 0.8) 16%, transparent 00%), radial-gradient(circle at 60%, rgba(255, 187, 050, 0.8) 16%, transparent 00%);     }     32% {         background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 45%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 55%, rgba(255, 187, 050, 0.8) 17%, transparent 00%);     }     34% {         background: radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%);     }     36% {         background: radial-gradient(circle at 45%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 00%, transparent 00%), radial-gradient(circle at 55%, rgba(051, 181, 229, 0.8) 17%, transparent 00%);     }     38% {         background: radial-gradient(circle at 40%, rgba(255, 068, 068, 0.8) 16%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 00%, transparent 00%), radial-gradient(circle at 60%, rgba(051, 181, 229, 0.8) 16%, transparent 00%);     }     40% {         background: radial-gradient(circle at 35%, rgba(255, 068, 068, 0.8) 15%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 05%, transparent 00%), radial-gradient(circle at 65%, rgba(051, 181, 229, 0.8) 15%, transparent 00%);     }     42% {         background: radial-gradient(circle at 30%, rgba(255, 068, 068, 0.8) 14%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 10%, transparent 00%), radial-gradient(circle at 70%, rgba(051, 181, 229, 0.8) 14%, transparent 00%);     }     44% {         background: radial-gradient(circle at 25%, rgba(255, 068, 068, 0.8) 13%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 15%, transparent 00%), radial-gradient(circle at 75%, rgba(051, 181, 229, 0.8) 13%, transparent 00%);     }     46% {         background: radial-gradient(circle at 20%, rgba(255, 068, 068, 0.8) 12%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 80%, rgba(051, 181, 229, 0.8) 12%, transparent 00%);     }     48% {         background: radial-gradient(circle at 15%, rgba(255, 068, 068, 0.8) 11%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 85%, rgba(051, 181, 229, 0.8) 11%, transparent 00%);     }     50% {         background: radial-gradient(circle at 12%, rgba(255, 068, 068, 0.8) 10%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 88%, rgba(051, 181, 229, 0.8) 10%, transparent 00%);     }     52% {         background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 12%, rgba(255, 068, 068, 0.8) 10%, transparent 00%), radial-gradient(circle at 88%, rgba(051, 181, 229, 0.8) 10%, transparent 00%);     }     54% {         background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 15%, rgba(255, 068, 068, 0.8) 11%, transparent 00%), radial-gradient(circle at 85%, rgba(051, 181, 229, 0.8) 11%, transparent 00%);     }     56% {         background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 20%, rgba(255, 068, 068, 0.8) 12%, transparent 00%), radial-gradient(circle at 80%, rgba(051, 181, 229, 0.8) 12%, transparent 00%);     }     58% {         background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 25%, rgba(255, 068, 068, 0.8) 13%, transparent 00%), radial-gradient(circle at 75%, rgba(051, 181, 229, 0.8) 13%, transparent 00%);     }     60% {         background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 30%, rgba(255, 068, 068, 0.8) 14%, transparent 00%), radial-gradient(circle at 70%, rgba(051, 181, 229, 0.8) 14%, transparent 00%);     }     62% {         background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 35%, rgba(255, 068, 068, 0.8) 15%, transparent 00%), radial-gradient(circle at 65%, rgba(051, 181, 229, 0.8) 15%, transparent 00%);     }     64% {         background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 40%, rgba(255, 068, 068, 0.8) 16%, transparent 00%), radial-gradient(circle at 60%, rgba(051, 181, 229, 0.8) 16%, transparent 00%);     }     66% {         background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 45%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 55%, rgba(051, 181, 229, 0.8) 17%, transparent 00%);     }     68% {         background: radial-gradient(circle at 50%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(255, 068, 068, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%);     }     70% {         background: radial-gradient(circle at 45%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 00%, transparent 00%), radial-gradient(circle at 55%, rgba(255, 068, 068, 0.8) 17%, transparent 00%);     }     72% {         background: radial-gradient(circle at 40%, rgba(255, 187, 050, 0.8) 16%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 00%, transparent 00%), radial-gradient(circle at 60%, rgba(255, 068, 068, 0.8) 16%, transparent 00%);     }     74% {         background: radial-gradient(circle at 35%, rgba(255, 187, 050, 0.8) 15%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 05%, transparent 00%), radial-gradient(circle at 65%, rgba(255, 068, 068, 0.8) 15%, transparent 00%);     }     76% {         background: radial-gradient(circle at 30%, rgba(255, 187, 050, 0.8) 14%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 10%, transparent 00%), radial-gradient(circle at 70%, rgba(255, 068, 068, 0.8) 14%, transparent 00%);     }     78% {         background: radial-gradient(circle at 25%, rgba(255, 187, 050, 0.8) 13%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 15%, transparent 00%), radial-gradient(circle at 75%, rgba(255, 068, 068, 0.8) 13%, transparent 00%);     }     80% {         background: radial-gradient(circle at 20%, rgba(255, 187, 050, 0.8) 12%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 80%, rgba(255, 068, 068, 0.8) 12%, transparent 00%);     }     82% {         background: radial-gradient(circle at 15%, rgba(255, 187, 050, 0.8) 11%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 85%, rgba(255, 068, 068, 0.8) 11%, transparent 00%);     }     84% {         background: radial-gradient(circle at 12%, rgba(255, 187, 050, 0.8) 10%, transparent 00%), radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 88%, rgba(255, 068, 068, 0.8) 10%, transparent 00%);     }     86% {         background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 12%, rgba(255, 187, 050, 0.8) 10%, transparent 00%), radial-gradient(circle at 88%, rgba(255, 068, 068, 0.8) 10%, transparent 00%);     }     88% {         background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 15%, rgba(255, 187, 050, 0.8) 11%, transparent 00%), radial-gradient(circle at 85%, rgba(255, 068, 068, 0.8) 11%, transparent 00%);     }     90% {         background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 20%, rgba(255, 187, 050, 0.8) 12%, transparent 00%), radial-gradient(circle at 80%, rgba(255, 068, 068, 0.8) 12%, transparent 00%);     }     92% {         background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 25%, rgba(255, 187, 050, 0.8) 13%, transparent 00%), radial-gradient(circle at 75%, rgba(255, 068, 068, 0.8) 13%, transparent 00%);     }     94% {         background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 30%, rgba(255, 187, 050, 0.8) 14%, transparent 00%), radial-gradient(circle at 70%, rgba(255, 068, 068, 0.8) 14%, transparent 00%);     }     96% {         background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 35%, rgba(255, 187, 050, 0.8) 15%, transparent 00%), radial-gradient(circle at 65%, rgba(255, 068, 068, 0.8) 15%, transparent 00%);     }     98% {         background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 40%, rgba(255, 187, 050, 0.8) 16%, transparent 00%), radial-gradient(circle at 60%, rgba(255, 068, 068, 0.8) 16%, transparent 00%);     }     100% {         background: radial-gradient(circle at 50%, rgba(051, 181, 229, 0.8) 17%, transparent 00%), radial-gradient(circle at 45%, rgba(255, 187, 050, 0.8) 17%, transparent 00%), radial-gradient(circle at 55%, rgba(255, 068, 068, 0.8) 17%, transparent 00%);     } } 

关于作者: yandaxia

为您推荐