时间戳

首页 > 解决方案 > 做一个扩大的圈子，在规模上揭示内容背后

javascript - 做一个扩大的圈子，在规模上揭示内容背后

问题描述

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

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

标签： javascripthtmlcss

解决方案

您可以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>

推荐阅读