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>

标签： javascriptcssanimationcss-transitions

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>