javascript – 制作一个扩展的圈子,在规模上显示内容

所以我有一个问题一直在唠叨我.你可以创建一个圆,当扩展时,“删除”父级,但只删除一部分(即圆的宽度和高度),并使该父级后面的内容可见？这是一个草图：

你能做那样的事吗？
我最接近的是混合混合模式：差异;但它只适用于颜色,而不适用于其他各种内容,如文本.

解决方法

您可以使用伪元素中的径向渐变作为顶层执行此操作,然后只需控制背景大小：

.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,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,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,eu facilisis tortor varius id. Vivamus a pulvinar ante. 
</div>

让我们不要忘记剪辑路径解决方案：

.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,eu facilisis tortor varius id. Vivamus a pulvinar ante. 
</div>

javascript – 制作一个扩展的圈子,在规模上显示内容

解决方法

猜你在找的JavaScript相关文章