52 lines
1.3 KiB
CSS
52 lines
1.3 KiB
CSS
body,
|
|
.c1,
|
|
.c2 {
|
|
display: grid;
|
|
place-items: center;
|
|
background-color: #000;
|
|
}
|
|
body {
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
.c1,
|
|
.c2 {
|
|
min-width: 16vmin;
|
|
min-height: 16vmin;
|
|
border-radius: 50%;
|
|
padding: 6vmin;
|
|
background-size: 4vmin 4vmin;
|
|
background-position: calc(50% + 0vmin) calc(50% + 0vmin);
|
|
}
|
|
.c1 {
|
|
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #fff), color-stop(0, transparent));
|
|
background-image: linear-gradient(to left, #fff 0 0.4vmin, transparent 0);
|
|
-webkit-animation: c1 0.3s infinite linear;
|
|
animation: c1 0.3s infinite linear;
|
|
}
|
|
.c2 {
|
|
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0, transparent));
|
|
background-image: linear-gradient(to top, #fff 0 0.4vmin, transparent 0);
|
|
-webkit-animation: c2 0.3s infinite linear;
|
|
animation: c2 0.3s infinite linear;
|
|
}
|
|
@-webkit-keyframes c1 {
|
|
to {
|
|
background-position: calc(50% + 4vmin) calc(50% + 0vmin);
|
|
}
|
|
}
|
|
@keyframes c1 {
|
|
to {
|
|
background-position: calc(50% + 4vmin) calc(50% + 0vmin);
|
|
}
|
|
}
|
|
@-webkit-keyframes c2 {
|
|
to {
|
|
background-position: calc(50% + 0vmin) calc(50% + 4vmin);
|
|
}
|
|
}
|
|
@keyframes c2 {
|
|
to {
|
|
background-position: calc(50% + 0vmin) calc(50% + 4vmin);
|
|
}
|
|
} |