loading2.gif
HTML:
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%);
}
}