Question

这里有独特的问题。我在夜总会网站上使用这些CSS Lasers：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);
  }
}

我无法让激光器不能创建溢出-x，这有什么理由吗？我希望它们覆盖整个页面但不创建滚动条

我尝试将它们添加到div中并添加overflow：hidden;造型，以及高度：100％;宽度：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资产溢出隐藏集

1 个答案: