css 如何制作一个圆形的div，扩展并填充整个页面(页面有滚动)而不扩展页面

67up9zun 于 2022-12-02 发布在其他

关注(0)|答案(1)|浏览(157)

label {
  background: #f00;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  transition: all .5s;
  overflow: hidden;
}

input:checked+label {
  width: 100%;
  height: 10000%;
  top: 0;
  margin-top: 0;
  left: 0;
  margin-left: 0;
  border-radius: 0;
  background: #0f0;
  overflow: hidden;
}

input {
  visibility: hidden;
  position: absolute;
  overflow: hidden;
}

<input id="hidden-checkbox" type="checkbox"></input>
<label for="hidden-checkbox"></label>

无论我用什么方法，它总是扩大页面或左角未填充，这是我试图这样做的方式之一，但如果页面是可滚动的，它只是不工作

css

来源：https://stackoverflow.com/questions/76402947/how-to-make-a-circle-div-that-expend-and-fill-the-entire-pagethe-page-have-scro

1条答案

按热度按时间

relj7zay1#

我会使用clip-path和box-shadow：

label {
  position: absolute;
  inset: 0;
  width: 100px;
  aspect-ratio: 1;
  margin: auto;
  background: #f00;
  box-shadow: 0 0 0 100vmax #f00; /* very big box-shadow here */
  clip-path: circle(50%); /* fit the element size */
  transition: all .5s;
}

input:checked + label {
  clip-path: circle(100vmax); /* make the circle bigger */
}

input {
  visibility: hidden;
  position: absolute;
  overflow: hidden;
}

<input id="hidden-checkbox" type="checkbox"></input>
<label for="hidden-checkbox"></label>

赞(0）回复(0）举报 2023-06-07

我来回答

css 如何制作一个圆形的div，扩展并填充整个页面(页面有滚动)而不扩展页面

1条答案

相关问题

热门标签

最新问答