CSS 资产溢出隐藏集

Question

独特的问题在这里。我正在为夜总会网站使用这些 CSS 激光器：https://codepen.io/jefferymills/pen/xpmDK

代码因为即使在 CodePen 上也是必需的

HTML

<div class="laser-beam"></div>
<div class="laser-beam red"></div>
<div class="laser-beam purple"></div>
<div class="laser-beam green"></div>

CSS

html {
  background: #222;
}

.laser-beam {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3px;
  height: 500%;
  background: rgba(99, 195, 231, 0.6);
  -webkit-box-shadow: 0px 0px 15px 0px #63c3e7;
  -moz-box-shadow: 0px 0px 15px 0px #63c3e7;
  box-shadow: 0px 0px 15px 0px #63c3e7;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-animation: laser 7s infinite;
}
.laser-beam.red {
  -webkit-animation: laser 7.5s infinite;
  background: rgba(236, 19, 65, 0.6);
  -webkit-box-shadow: 0px 0px 15px 0px #ec1341;
  -moz-box-shadow: 0px 0px 15px 0px #ec1341;
  box-shadow: 0px 0px 15px 0px #ec1341;
}
.laser-beam.purple {
  -webkit-animation: laser 7.3s infinite;
  background: rgba(204, 102, 255, 0.6);
  -webkit-box-shadow: 0px 0px 15px 0px #cc66ff;
  -moz-box-shadow: 0px 0px 15px 0px #cc66ff;
  box-shadow: 0px 0px 15px 0px #cc66ff;
}
.laser-beam.green {
  -webkit-animation: laser 7.7s infinite;
  background: rgba(86, 212, 69, 0.6);
  -webkit-box-shadow: 0px 0px 15px 0px #56d445;
  -moz-box-shadow: 0px 0px 15px 0px #56d445;
  box-shadow: 0px 0px 15px 0px #56d445;
}

@-webkit-keyframes laser {
  0% {
    -moz-transform: rotate(-75deg);
    -ms-transform: rotate(-75deg);
    -webkit-transform: rotate(-75deg);
    transform: rotate(-75deg);
  }
  50% {
    -moz-transform: rotate(75deg);
    -ms-transform: rotate(75deg);
    -webkit-transform: rotate(75deg);
    transform: rotate(75deg);
  }
  100% {
    -moz-transform: rotate(-75deg);
    -ms-transform: rotate(-75deg);
    -webkit-transform: rotate(-75deg);
    transform: rotate(-75deg);
  }
}

我无法让激光不产生 overflow-x，这有什么原因吗？我希望它们覆盖整个页面但不创建滚动条

我尝试将它们添加到 div 并添加 overflow:hidden；样式，以及 height:100%； width:100%；我也试过在激光中设置它 CSS，但它似乎没有任何作用。

谢谢！

扎克

Answer 1

将它们包裹在 div 中。使 div 绝对到正文。

<div class="hide-overflow">
<div class="laser-beam"></div>
<div class="laser-beam red"></div>
<div class="laser-beam purple"></div>
<div class="laser-beam green"></div>
</div>

.hide-overflow {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

或者你可以只设置正文溢出

body {
overflow: hidden;
}

CSS 资产溢出隐藏集

CSS Asset Overflowing With Hidden Set

html

css

overflow