mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
98 lines
1.9 KiB
HTML
98 lines
1.9 KiB
HTML
<div class="planet">
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by fanishah - Tags: loader */
|
|
.planet {
|
|
display: block;
|
|
width: 125px;
|
|
height: 125px;
|
|
position: relative;
|
|
transform-style: preserve-3d;
|
|
border-radius: 50%;
|
|
background: #fcc96b;
|
|
background: #fcc96b;
|
|
background: linear-gradient(
|
|
180deg,
|
|
#fcc96b 0%,
|
|
#fcc96b 15%,
|
|
#f7ae01 15%,
|
|
#f7ae01 19%,
|
|
#fcc96b 19%,
|
|
#fcc96b 22%,
|
|
#f7ae01 22%,
|
|
#f7ae01 28%,
|
|
#fcc96b 28%,
|
|
#fcc96b 31%,
|
|
#fcc96b 33%,
|
|
#fcc96b 36%,
|
|
#f7ae01 36%,
|
|
#f7ae01 48%,
|
|
#fcc96b 48%,
|
|
#fcc96b 55%,
|
|
#f7ae01 55%,
|
|
#f7ae01 66%,
|
|
#fcc96b 66%,
|
|
#fcc96b 70%,
|
|
#f7ae01 70%,
|
|
#f7ae01 73%,
|
|
#fcc96b 73%,
|
|
#fcc96b 82%,
|
|
#f7ae01 82%,
|
|
#c7ba9d 86%,
|
|
#fcc96b 86%
|
|
);
|
|
box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.25),
|
|
inset 8px -4px 6px rgba(199, 128, 0, 0.5),
|
|
inset -8px 4px 8px rgba(255, 235, 199, 0.5), inset 20px -5px 12px #f7ae01,
|
|
0 0 100px #ffffff59;
|
|
transform: rotateZ(-15deg);
|
|
}
|
|
|
|
.planet::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
border: 16px solid #e1a519;
|
|
border-top-width: 0;
|
|
border-radius: 50%;
|
|
box-shadow: 0 -2px 0 #c18620;
|
|
animation: rings1 0.8s infinite linear;
|
|
}
|
|
|
|
.planet::after {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
border: 8px solid #d48b0c;
|
|
border-top-width: 0;
|
|
border-radius: 50%;
|
|
box-shadow: 0 -2px 0 #b99309;
|
|
animation: rings2 0.8s infinite linear;
|
|
}
|
|
|
|
@keyframes rings1 {
|
|
0% {
|
|
transform: rotateX(65deg) rotateZ(0deg) scale(1.75);
|
|
}
|
|
|
|
100% {
|
|
transform: rotateX(65deg) rotateZ(360deg) scale(1.75);
|
|
}
|
|
}
|
|
|
|
@keyframes rings2 {
|
|
0% {
|
|
transform: rotateX(65deg) rotateZ(0deg) scale(1.7);
|
|
}
|
|
|
|
100% {
|
|
transform: rotateX(65deg) rotateZ(360deg) scale(1.7);
|
|
}
|
|
}
|
|
</style>
|