53 lines
1.0 KiB
CSS
53 lines
1.0 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.cogs {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.static_cog, .dynamic_cog {
|
|
display: block;
|
|
position: relative;
|
|
margin: 0 calc((var(--d, 10) * 1.2 * 1vmin) * -.08);
|
|
height: 12vmin;
|
|
width: 12vmin;
|
|
mix-blend-mode: multiply;
|
|
|
|
stroke-width: 15.7;
|
|
stroke-dasharray: 0 31.4;
|
|
|
|
stroke-linecap: round;
|
|
animation: turn 6s infinite linear;
|
|
}
|
|
.static_cog circle:first-child, .dynamic_cog circle:first-child {
|
|
stroke-dashoffset: calc(15.7 * 10 / var(--d, 10));
|
|
}
|
|
.dynamic_cog {
|
|
width: calc(var(--d, 10) * 1.2 * 1vmin);
|
|
height: calc(var(--d, 10) * 1.2 * 1vmin);
|
|
stroke-width: calc(15.7 * 10 / var(--d, 10));
|
|
stroke-dasharray: 0 calc(31.4 * 10 / var(--d, 10));
|
|
|
|
animation: turn calc(6s * var(--d, 10) / 10) var(--delay, 0s) infinite linear var(--turn, normal);
|
|
}
|
|
|
|
@keyframes turn {
|
|
from {
|
|
transform: rotate(0);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
} |