javascript - 如何扩展背景图像以填满整个页面？

Question

我正在为左上角的固定位置按钮创建一个动画，它创建了一个背景，当点击时它会在整个页面上传播。所以我写了一个这样的 CSS:它只扩展到父元素，但是如何我让它成为一个延伸到整个页面的动画？

div {
    height: 200px;
    width: 200px;
    background: radial-gradient(circle at center, blue 50%, transparent 50%);
    background-size: 10% 10%;
    background-position: center;
    background-repeat: no-repeat;
    transition: all .5s;
}

div:hover {
    background-size: 200% 200%;
}

<div></div>

Answer 1

你可以考虑如下伪元素:

.box {
  height: 200px;
  width: 200px;
  position: relative;
}

.box:before {
  content: "";
  position: absolute;
  top: -100vh;
  bottom: -100vh;
  left: -100vw;
  right: -100vw;
  background: radial-gradient(circle, blue 50%, transparent 50%) center no-repeat;
  background-size: 20px 20px;
  transition: all .5s;
  pointer-events:none;
}

.box:hover::before {
  background-size: 200% 200%;
}

html {
 overflow:hidden;
}

<div class="box"></div>