Паскаль Ионеско's questions

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: black;
  position: relative;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  transition: transform 0.5s ease;
  mix-blend-mode: screen;
  /* Эффект слияния */
}

.circle+.circle {
  animation: 3s anim alternate infinite;
}

@keyframes anim {
  0% {
    transform: translateX(100px);
  }

  100% {
    transform: translateX(-100px);
  }
}

#main {
  position: relative;
}

#main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.4));
  pointer-events: none;
}

<main id="main">
  <div class="circle" id="a"></div>
  <div class="circle" id="b"></div>
</main>