时间戳

首页 > 解决方案 > 如何修复 CSS 平面渐变动画中的闪烁？

html - 如何修复 CSS 平面渐变动画中的闪烁？

问题描述

我正在尝试为一个项目制作一个整洁的背景，并且我正在使用 CSS 中的平面来实现蒸汽波/Tron 风格的外观。出于某种原因，平面网格上的远处线闪烁非常糟糕。我尝试了以下解决方案无济于事：

我正在使用以下 HTML 和 CSS；

html {
  /*     height: 100 */
  overflow: hidden;
}

.wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  margin: 0 auto;
  perspective: 360px;
  -webkit-transform-style: preserve-3d;
}

.top-plane,
.bottom-plane {
  width: 180%;
  height: 400%;
  top: -150%;
  position: fixed;
  background-image: -webkit-linear-gradient(#9b1ba1 3px, transparent 3px), -webkit-linear-gradient(left, #9b1ba1 3px, transparent 3px);
  background-size: 100px 100px, 100px 100px;
  /* background-position: -1px -1px, -1px -1px; */
  -webkit-transform: rotateY(85deg);
  -webkit-transform-style: preserve-3d;
  animation: planeMoveTop 2s infinite linear;
}

.bottom-plane {
  -webkit-transform: rotateY(-85deg);
  right: -60%;
  animation: planeMoveBot 2s infinite linear;
}

.top-plane {
  left: -60%;
}

@keyframes planeMoveTop {
  from {
    background-position: 0px 0px, 0px 0px;
  }
  to {
    background-position: 0px 0px, -100px 0px;
  }
}

@keyframes planeMoveBot {
  from {
    background-position: 0px 0px, 0px 0px;
  }
  to {
    background-position: 0px 0px, 100px 0px;
  }
}

@media (max-height: 350px) {
  .wrap {
    perspective: 210px;
  }
}
<body>
  <div class="wrap">
    <div class="top-plane"></div>
    <div class="bottom-plane"></div>
  </div>
</body>

标签： htmlcss

解决方案

推荐阅读