CSS实现两个圆重叠交替

最新推荐文章于 2024-01-05 16:23:43 发布

xiao手冰凉

最新推荐文章于 2024-01-05 16:23:43 发布

阅读量2.7k

点赞数 1

文章标签： css

原文链接：https://juejin.cn/post/6914811150655979534

版权

在网上看见两个圆形重叠交替的效果，但是想不出如何用css去实现这种效果，于是在网上搜索资料，找到了解决的办法

解决办法就是使用css-blend-mode: multiply属性来实现，详细可以看css-blend-mode

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

.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;
}