CSS allows two circles to overlap and alternate

I saw the effect of two circles overlapping and alternating on the Internet, but I couldn’t figure out how to use CSS to achieve this effect, so I searched the information on the Internet and found a solution

The solution is to use the CSS-blending-mode: multiply property. See csS-blending-mode for details

<div class="container">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
</div>
Copy the code

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: red;
  mix-blend-mode: multiply;
}
.circle-1 {
  background: blue;
}
.circle-2 {
  margin-left: -60px;
}
Copy the code