Блог

Я создал вращающийся линейно-градиентный фон. К сожалению, при вращении в углах вы можете видеть белый экран. Я пытаюсь сделать так, чтобы цвет заполнял область просмотра, не видя ничего, кроме вращающегося градиента.

Вот мой код до сих пор (сделано на codepen.io ):

HTML

 <div class="fade"></div>
 

CSS

 body {
  margin: 0;
}

.fade {
  background-image: linear-gradient(0deg, red, blue, red);
  height: 100vh;
  width: 100%;
  animation: revolve 1s infinite linear;
}

@keyframes revolve {
  from {
    transform: scale3d(1,1,1) rotateZ(0deg);
  }
  to {
    transform: scale3d(1,1,1) rotateZ(360deg);
  }
}
 

Изначально у меня был scale3d как (2,2,1). Изменение его на (1,1,1) ничего не решило. Я также пытался изменить высоту и ширину на более 100 Вт и установить фоновое положение центра center, но ни одно из них не сработало.

Вот codepen.

Используйте vmax единицу, как показано ниже, чтобы создать большой переполненный квадрат:

 body {
  margin: 0;
  overflow:hidden;
}

.fade {
  background-image: linear-gradient(0deg, red, blue, red);
  position:absolute;
  height: 200vmax;
  width: 200vmax;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  animation: revolve 1s infinite linear;
}

@keyframes revolve {
  to {
    transform:translate(-50%,-50%) rotate(360deg);
  }
} 

 <div class="fade"></div> 

Вы можете упростить с помощью псевдоэлемента:

 html::before {
  content:"";
  background-image: linear-gradient(0deg, red, blue, red);
  position:fixed;
  top:-50vmax;
  bottom:-50vmax;
  left:-50vmax;
  right:-50vmax;
  animation: revolve 1s infinite linear;
}

@keyframes revolve {
  to {
    transform: rotate(360deg);
  }
}