javascript - 制作一个不断扩大的圈子，揭示内容背后的规模

Question

所以我有一个一直困扰着我的问题。你能做一个圆圈，当展开时，“删除”父级，但只删除一部分(即圆的宽度和高度)并使该父级后面的内容可见吗？这是一个草图:

你能做这样的事情吗？我得到的最接近的是 mix-blend-mode: difference; 但它只适用于颜色而不适用于其他各种内容，例如文本。

Answer 1

你可以在伪元素中使用 radial-gradient 作为顶层来做这样的事情，然后简单地控制 background-size:

.box {
  width:200px;
  height:100px;
  background:blue;
  position:relative;
  color:#fff;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  background-image:radial-gradient(circle at center, transparent 20%,blue 22%);
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  transition:1s;
}
.box:hover::before {
  background-size:500% 500%;
}

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate dignissim leo, sed varius urna lacinia et. Vivamus volutpat turpis tellus, sit amet lobortis quam finibus non. Nunc ac sodales lectus, et dictum enim. Praesent blandit pulvinar erat, eu facilisis tortor varius id. Vivamus a pulvinar ante. 
</div>

你也可以考虑box-shadow，把伪元素做成一个圆圈:

.box {
  width:200px;
  height:100px;
  background:blue;
  position:relative;
  color:#fff;
  overflow:hidden;
}
.box:before {
  content:"";
  position:absolute;
  width:40px;
  height:40px;
  border-radius:50%;
  box-shadow:0 0 0 2000px blue;
  top:calc(50% - 20px);
  left:calc(50% - 20px);
  transition:1s;
}
.box:hover::before {
  width:250px;
  height:250px;
  top:calc(50% - 125px);
  left:calc(50% - 125px);
}

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate dignissim leo, sed varius urna lacinia et. Vivamus volutpat turpis tellus, sit amet lobortis quam finibus non. Nunc ac sodales lectus, et dictum enim. Praesent blandit pulvinar erat, eu facilisis tortor varius id. Vivamus a pulvinar ante. 
</div>

如果您需要一些透明度，这是另一种方法:

.box {
  margin-top:80px;
  margin-left:130px;
  width:40px;
  height:40px;
  border-radius:50%;
  color:#fff;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:1s all;
}
.box > span {
  flex-shrink:0;
  background:blue;
  width:200px;
  height:100px;
  overflow:hidden;
}
.box:hover {
  margin:0px;
  width:300px;
  height:200px;
}
body {
 margin:0;
 background:pink;
}

<div class="box">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate dignissim leo, sed varius urna lacinia et. Vivamus volutpat turpis tellus, sit amet lobortis quam finibus non. Nunc ac sodales lectus, et dictum enim. Praesent blandit pulvinar erat, eu facilisis tortor varius id. Vivamus a pulvinar ante. 
</span>
</div>

---

一种更棘手的方法，只有背景，没有额外的元素或伪元素(只适用于文本)

.box {
  width:200px;
  height:100px;
  position:relative;
  background:
   radial-gradient(circle at center, #000 20%,transparent 22%);
  background-size:100% 100%;
  background-position:center;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition:1s;
}
.box:hover {
  background-size:500% 500%;
}

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate dignissim leo, sed varius urna lacinia et. Vivamus volutpat turpis tellus, sit amet lobortis quam finibus non. Nunc ac sodales lectus, et dictum enim. Praesent blandit pulvinar erat, eu facilisis tortor varius id. Vivamus a pulvinar ante. 
</div>

别忘了clip-path 解决方案:

.box {
  width:200px;
  height:100px;
  position:relative;
  background:blue;
  color:#fff;
  transition:1s;
  -webkit-clip-path: circle(22% at 50% 50%);
clip-path: circle(22% at 50% 50%);
}
.box:hover {
  -webkit-clip-path: circle(80% at 50% 50%);
clip-path: circle(80% at 50% 50%);
}

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate dignissim leo, sed varius urna lacinia et. Vivamus volutpat turpis tellus, sit amet lobortis quam finibus non. Nunc ac sodales lectus, et dictum enim. Praesent blandit pulvinar erat, eu facilisis tortor varius id. Vivamus a pulvinar ante. 
</div>