我正在为左上角的固定位置按钮创建一个动画,它创建了一个背景,当点击时它会在整个页面上传播。所以我写了一个这样的 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>
最佳答案
你可以考虑如下伪元素:
.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>
关于javascript - 如何扩展背景图像以填满整个页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59593172/