76 lines
2.1 KiB
CSS
76 lines
2.1 KiB
CSS
|
body {
|
||
|
|
--time:12s;
|
||
|
|
--count:13;
|
||
|
|
--spokes:6;
|
||
|
|
height: 100vh;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
body .circles {
|
||
|
|
-webkit-animation: rotate var(--time) linear infinite;
|
||
|
|
animation: rotate var(--time) linear infinite;
|
||
|
|
}
|
||
|
|
body .circles, body .circles .circle {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
-webkit-transform: translate(-50%, -50%);
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
}
|
||
|
|
body .circles .circle {
|
||
|
|
width: 50vmin;
|
||
|
|
height: 50vmin;
|
||
|
|
border-radius: 50%;
|
||
|
|
-webkit-animation: rotate var(--time) linear infinite;
|
||
|
|
animation: rotate var(--time) linear infinite;
|
||
|
|
-webkit-animation-delay: calc(var(--animation-delay, 0) * var(--time)/var(--count));
|
||
|
|
animation-delay: calc(var(--animation-delay, 0) * var(--time)/var(--count));
|
||
|
|
}
|
||
|
|
body .circles .circle .inner {
|
||
|
|
position: absolute;
|
||
|
|
top: 10%;
|
||
|
|
left: 50%;
|
||
|
|
width: 25vmin;
|
||
|
|
height: 25vmin;
|
||
|
|
-webkit-transform: translate(-50%, -50%);
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
animation: rotate calc(var(--time)/var(--spokes)) ease infinite reverse;
|
||
|
|
-webkit-animation-delay: calc(var(--animation-delay, 0) * var(--time)/var(--count));
|
||
|
|
animation-delay: calc(var(--animation-delay, 0) * var(--time)/var(--count));
|
||
|
|
}
|
||
|
|
body .circles .circle .inner .dot {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0%;
|
||
|
|
left: 50%;
|
||
|
|
-webkit-transform: translateX(-50%);
|
||
|
|
transform: translateX(-50%);
|
||
|
|
width: 5vmin;
|
||
|
|
height: 5vmin;
|
||
|
|
}
|
||
|
|
body .circles .circle .inner .dot:before {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
-webkit-transform: translate(-50%, -50%);
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
font-size: 8vmin;
|
||
|
|
}
|
||
|
|
@-webkit-keyframes rotate {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate(-50%, -50%) rotate(0deg);
|
||
|
|
transform: translate(-50%, -50%) rotate(0deg);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate(-50%, -50%) rotate(360deg);
|
||
|
|
transform: translate(-50%, -50%) rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes rotate {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate(-50%, -50%) rotate(0deg);
|
||
|
|
transform: translate(-50%, -50%) rotate(0deg);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate(-50%, -50%) rotate(360deg);
|
||
|
|
transform: translate(-50%, -50%) rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|