Круги #8923 - пример html js css

• HTML код


• CSS код
• Результат кода

<div class="solid"></div>

<div class="solid"></div>

<div class="lined"></div>

<div class="invert"></div>

html {

  background: #000;

}

body {

  display: flex;

  height: 100vh;

  overflow: hidden;

  justify-content: center;

  align-items: center;

}

div {

  border-radius: 50%;

  width: var(--size);

  height: var(--size);

  --size: 40vmin;

  position: absolute;

}

.lined {

  --lined-unit: 1vmin;

  background: linear-gradient(

    to right,

    #fff var(--lined-unit),

    #ffffff00 var(--lined-unit) calc(var(--lined-unit) * 2)

  );

  background-size: calc(var(--lined-unit) * 2) 100%;

  animation: spin 12800ms -3200ms infinite linear;

}

.solid {

  --size: 32vmin;

  background: hsl(343, 100%, 55%);

  transform-origin: 60% 60%;

  animation: spin-2 3300ms infinite linear;

}

.solid:nth-child(2) {

  --size: 22vmin;

  background: hsl(183, 100%, 55%);

  transform-origin: 30% 80%;

  animation: spin-2 4300ms infinite linear;

  mix-blend-mode: screen;

}

.invert {

  background: rgba(255, 255, 255, 1);

  clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);

  animation: spin 6400ms infinite linear;

  mix-blend-mode: difference;

}

@keyframes spin {

  100% {

    transform: rotate(1turn);

  }

}

@keyframes spin-2 {

  0% {

    transform: rotate(0turn) translate(-10%, -10%);

  }

  100% {

    transform: rotate(1turn) translate(-10%, -10%);

  }

}