Question

所以我做了一个所谓的“星空”的动画。它们由几个小的旋转径向梯度组成。

现在当它们旋转时，您可以清楚地看到它们停止/结束的位置。增加背景的高度会修复此问题，但它也会增加整个页面高度。

无论如何都要增加背景高度，但要将其保持在页面的中心位置？

以下是codepen：https://codepen.io/twanmulder/pen/GNLRWo

<!doctype html>
<html>
<head></head>
<body>
<div class="starfield">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
<html>

Answer 1

position: absolute上的.starfield和overflow: hidden body上的.starfield（或

body, html {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
}

body {
  overflow: hidden;
}

.starfield {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-animation: fadein 15s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadein 15s; /* Firefox < 16 */
      -ms-animation: fadein 15s; /* Internet Explorer */
       -o-animation: fadein 15s; /* Opera < 12.1 */
          animation: fadein 15s;
}

.starfield > * {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.starfield > * {
  background-size: 200px 200px;
  background-image: radial-gradient(2px 2px at 40px 60px, #ccc, rgba(0,0,0,0)),
   radial-gradient(2px 2px at 20px 50px, #ddd, rgba(0,0,0,0)),
   radial-gradient(2px 2px at 30px 100px, #eee, rgba(0,0,0,0)),
   radial-gradient(2px 2px at 40px 60px, #fff, rgba(0,0,0,0)),
   radial-gradient(2px 2px at 110px 90px, #ccc, rgba(0,0,0,0)),
   radial-gradient(2px 2px at 190px 150px, #ddd, rgba(0,0,0,0));
  background-repeat: repeat;
}

.starfield > * {
  transform-origin: 50% 50%;
  animation-name: starfieldRotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  }

  .starfield > *:nth-child(1){
    animation-duration: 25s;
    animation-delay: -15;
  }
  .starfield > *:nth-child(2){
    animation-duration: 35s;
    animation-delay: -50s;
  }
  .starfield > *:nth-child(3){
    animation-duration: 50s;
  }
  .starfield > *:nth-child(4){
    animation-duration: 70s;
  }
  .starfield > *:nth-child(5){
    animation-duration: 120s;
  }

@keyframes starfieldRotate {
  from {transform:rotate(0deg);}
  to {transform: rotate(360deg);}
}

的父级）。

＆＃13;

<div class="starfield">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

＆＃13;

@amplicon_exon

＆＃13;

如何在不扩展页面的情况下跨度的高度？

1 个答案: