mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
52 lines
No EOL
745 B
HTML
52 lines
No EOL
745 B
HTML
<div class="blob"></div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by vikramsinghnegi - Tags: simple, loader, blob */
|
|
.blob {
|
|
width: 112px;
|
|
height: 112px;
|
|
display: grid;
|
|
background: #fff;
|
|
filter: blur(5.6px) contrast(10);
|
|
padding: 11.2px;
|
|
mix-blend-mode: darken;
|
|
}
|
|
|
|
.blob:before,
|
|
.blob:after {
|
|
content: "";
|
|
grid-area: 1/1;
|
|
width: 44.8px;
|
|
height: 44.8px;
|
|
background: #474bff;
|
|
animation: blob-rhf26m 2s infinite;
|
|
}
|
|
|
|
.blob:after {
|
|
animation-delay: -1s;
|
|
}
|
|
|
|
@keyframes blob-rhf26m {
|
|
0% {
|
|
transform: translate(0, 0);
|
|
}
|
|
|
|
25% {
|
|
transform: translate(100%, 0);
|
|
}
|
|
|
|
50% {
|
|
transform: translate(100%, 100%);
|
|
}
|
|
|
|
75% {
|
|
transform: translate(0, 100%);
|
|
}
|
|
|
|
100% {
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|