建立一个扩大的圈子，揭示规模背后的内容

Question

所以我有一个困扰我的问题。您能否制作一个圆圈，使其在展开时“删除”父对象，但仅删除一部分（即圆圈的宽度和高度）并使该父对象后面的内容可见？这是草图：

您可以做类似的事情吗？ 我得到的最接近的是 public class FilterDataViewModel { public int ItemID { get; set; } public string SearchingKey { get; set; } public int DestinationCityID { get; set; } public int citykey { get; set; } } ，但它仅适用于颜色，不适用于文本等其他各种内容。

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>